|
|
@@ -1,263 +1,160 @@
|
|
|
<template>
|
|
|
- <view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
|
|
|
- <custom-p v-if="isHeaderPoduct"
|
|
|
- :systeminfo='systeminfo'
|
|
|
- :navbar-data='nvabarData'
|
|
|
- :headerBtnPosi ="headerBtnPosi"
|
|
|
- :headerColor="headerColor"
|
|
|
- :type="isShareType"
|
|
|
- :page='backPage'>
|
|
|
- </custom-p>
|
|
|
- <view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
|
|
|
- <view class="search-input">
|
|
|
- <view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
|
|
|
- <view class="search-icon">
|
|
|
- <text class="iconfont icon-sousuo"></text>
|
|
|
- </view>
|
|
|
- <view class="search-text">搜索商品/供应商/项目仪器</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="product" style="padding-bottom: 30rpx;">
|
|
|
+ <view class="product-topnav" v-if="isNavbarFiexd" :class="navbarFiexd">
|
|
|
+ <!-- 导航栏 -->
|
|
|
<view class="navbar">
|
|
|
<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
|
- <text>详情</text>
|
|
|
- <text class="line"></text>
|
|
|
+ <text>商品</text> <text class="line"></text>
|
|
|
</view>
|
|
|
<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
|
|
|
- <text>服务项目</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
|
- <text>推荐</text>
|
|
|
- <text class="line"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <text>详情</text> <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
|
|
|
+ :class="{ current: tabCurrentIndex === 2 }"
|
|
|
+ @click="tabClick(2)"
|
|
|
+ >
|
|
|
+ <text>服务项目</text> <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
- <template v-else >
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5"></tui-skeleton>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 如果商品下架 -->
|
|
|
<view class="cart-content empty" v-if="isInvalid">
|
|
|
- <view class="empty-container">
|
|
|
+ <view class="empty-container">
|
|
|
<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
|
|
|
- <text class="error-text">商品已失效，去商城逛逛别的吧~</text>
|
|
|
- <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
+ <text class="error-text">商品已失效，去商城逛逛别的吧~</text> <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="container-product tui-skeleton" v-else>
|
|
|
+ <!-- 锚点 1 -->
|
|
|
<view class="container-product-main">
|
|
|
<view class="product-top">
|
|
|
+ <!-- 轮播图 -->
|
|
|
<view class="banner-section">
|
|
|
- <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
- <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
|
- <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
+ <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
|
|
|
+ <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration="800" :autoplay="false" :circular="true">
|
|
|
+ <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
<image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
<view class="swiper__dots-box">
|
|
|
- <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ productImage.length }}</tui-tag>
|
|
|
+ <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight
|
|
|
+ >{{ current + 1 }}/{{ productImage.length }}</tui-tag
|
|
|
+ >
|
|
|
</view>
|
|
|
</uni-swiper-dot>
|
|
|
</view>
|
|
|
<view class="product-wrap clearfix">
|
|
|
<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
|
|
|
<view class="wrap-top-price">
|
|
|
- <cm-price v-if="isRequest"
|
|
|
- :product="product"
|
|
|
- :userIdentity="userIdentity"
|
|
|
- :shopID= "shopID"
|
|
|
- :promotions="product.promotions"
|
|
|
- :ladderPriceList="ladderPriceList"/>
|
|
|
+ <!-- 价格 -->
|
|
|
+ <cm-price
|
|
|
+ v-if="isRequest"
|
|
|
+ :product="product"
|
|
|
+ :userIdentity="userIdentity"
|
|
|
+ :shopID="shopID"
|
|
|
+ :promotions="product.promotions"
|
|
|
+ :ladderPriceList="ladderPriceList"
|
|
|
+ />
|
|
|
</view>
|
|
|
<view class="p-title tui-skeleton-fillet">
|
|
|
+ <!-- 美博会 -->
|
|
|
<view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
|
|
|
- <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''"> {{product.name == undefined ? '' : product.name}} </view>
|
|
|
+ <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
|
|
|
+ {{ product.name == undefined ? '' : product.name }}
|
|
|
+ </view>
|
|
|
+ <!-- 分享 -->
|
|
|
<button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
|
|
|
- <view class=""><text class="iconfont icon-fenxiang1"></text></view>
|
|
|
- <view class="">分享</view>
|
|
|
+ <view class=""><text class="iconfont icon-fenxiang"></text></view> <view class="">分享</view>
|
|
|
</button>
|
|
|
</view>
|
|
|
- <view class="wrap-label" v-if="product.tagsList.length>0">
|
|
|
- <view class="label-a tui-skeleton-fillet" v-for="(label,index) in product.tagsList" :key="index">{{label}}</view>
|
|
|
- </view>
|
|
|
- <view class="product-seve">
|
|
|
- <text class="label">采美承诺：</text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
|
|
|
- </view>
|
|
|
- <view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
|
- 备注:{{product.productRemarks}}
|
|
|
- </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-item-none" v-if="goodsData.isNoneDisabled">
|
|
|
- <image class="none-image" :src="productNoneImage" mode=""></image>
|
|
|
- <view class="none-text">此商品已{{goodsData.disabledText}}，请浏览以下推荐商品~</view>
|
|
|
- </view>
|
|
|
- <view class="product-parameter" @click="showPopup" v-if="!goodsData.isNoneDisabled">
|
|
|
- <text class="title">参数：</text>
|
|
|
- <text class="name">品牌 起订量 分类...</text>
|
|
|
- <text class="iconfont icon-chakangengduo"></text>
|
|
|
- </view>
|
|
|
- <view class="product-supplier" @click="goSupplier">
|
|
|
- <view class="logo"><img :src="shop.logo ? shop.logo :'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'" alt=""></view>
|
|
|
- <view class="main">
|
|
|
- <view class="name">{{shop.name}}</view>
|
|
|
- <view class="massgs">
|
|
|
- <view class="label">满意度:</view>
|
|
|
- <view class="p-stars">
|
|
|
- <uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
|
|
|
- </view>
|
|
|
- <view class="acount">
|
|
|
- <text>{{ shop.normalNum }}</text>件商品
|
|
|
- </view>
|
|
|
+ <!-- 产品标签 -->
|
|
|
+ <view class="wrap-label" v-if="product.tagsList.length > 0">
|
|
|
+ <view class="label-a tui-skeleton-fillet" v-for="(label, index) in product.tagsList" :key="index">{{ label }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 承诺 -->
|
|
|
+ <view class="product-seve">
|
|
|
+ <text class="label">采美承诺：</text>
|
|
|
+ <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
|
|
|
+ <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
|
|
|
+ <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
|
|
|
</view>
|
|
|
+ <!-- 备注信息 -->
|
|
|
+ <view class="productRemarks" v-if="product.productRemarks != '' && product.productRemarks != null">
|
|
|
+ 备注:{{ product.productRemarks }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-details product-details0">
|
|
|
+ <view class="product-item-none" v-if="goodsData.isNoneDisabled">
|
|
|
+ <image class="none-image" :src="productNoneImage" mode=""></image>
|
|
|
+ <view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
|
|
|
+ </view>
|
|
|
+ <!-- 选择商品参数按钮 -->
|
|
|
+ <view class="product-parameter" @click="showPopup" v-if="!goodsData.isNoneDisabled">
|
|
|
+ <text class="title">参数：</text> <text class="name">品牌 起订量 分类...</text> <text class="iconfont icon-chakangengduo"></text>
|
|
|
</view>
|
|
|
- <view class="right"><text class="iconfont icon-chakangengduo"></text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="product-details product-details0">
|
|
|
+ <!-- 锚点 2 -->
|
|
|
+ <view class="product-details product-details1">
|
|
|
<!-- 商品详情 -->
|
|
|
- <view class="title">
|
|
|
- <view class="title-tab">商品详情</view>
|
|
|
- </view>
|
|
|
+ <view class="title"> <view class="title-tab">商品详情</view> </view>
|
|
|
<view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
<parser :html="html" :img-mode="widthFix" v-if="!goodsData.isNoneDisabled"></parser>
|
|
|
<view class="product-rich-text-none" v-else>暂无商品信息</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="product-details service product-details1">
|
|
|
+ </view>
|
|
|
+ <!-- 锚点 3 -->
|
|
|
+ <view class="product-details service product-details2">
|
|
|
<!-- 服务项目 -->
|
|
|
- <view class="title">
|
|
|
- <view class="title-tab">服务项目</view>
|
|
|
- </view>
|
|
|
+ <view class="title"> <view class="title-tab">服务项目</view> </view>
|
|
|
<view class="content service" v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
|
|
|
<cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
|
|
|
</view>
|
|
|
- <view class="content-none" v-else>
|
|
|
- <text>暂无服务项目</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-details recommend product-details2">
|
|
|
- <!-- 相关推荐 -->
|
|
|
- <view class="title">
|
|
|
- <view class="title-tab">相关推荐</view>
|
|
|
- </view>
|
|
|
- <view class="content hot">
|
|
|
- <recommend :query-productid="product.productID" :query-type="product.recommendType" v-if="isRequest"></recommend>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="content-none" v-else> <text>暂无服务项目</text> </view>
|
|
|
+ </view>
|
|
|
<!-- 商品参数 -->
|
|
|
<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
|
<view class="tui-popup-box clearfix">
|
|
|
<view class="title">商品参数</view>
|
|
|
<div class="tui-popup-main">
|
|
|
- <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
+ <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
<view class="content-tr">
|
|
|
- <view class="content-td">起订量</view>
|
|
|
- <view class="content-th">{{product.minBuyNumber}}</view>
|
|
|
+ <view class="content-td">起订量</view> <view class="content-th">{{ product.minBuyNumber }}</view>
|
|
|
</view>
|
|
|
<view class="content-tr">
|
|
|
<view class="content-td">品牌</view>
|
|
|
- <view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
|
|
|
+ <view class="content-th">{{ product.brandName == null ? '其他' : product.brandName }}</view>
|
|
|
</view>
|
|
|
<view class="content-tr">
|
|
|
<view class="content-td">分类</view>
|
|
|
- <view class="content-th">{{product.typeName == null? '暂无' : product.typeName}}</view>
|
|
|
+ <view class="content-th">{{ product.typeName == null ? '暂无' : product.typeName }}</view>
|
|
|
</view>
|
|
|
<view class="content-tr">
|
|
|
- <view class="content-td">包装规格</view>
|
|
|
- <view class="content-th">{{product.unit}}</view>
|
|
|
+ <view class="content-td">包装规格</view> <view class="content-th">{{ product.unit }}</view>
|
|
|
</view>
|
|
|
<view class="content-tr">
|
|
|
- <view class="content-td">商品编码</view>
|
|
|
- <view class="content-th">{{product.productCode}}</view>
|
|
|
+ <view class="content-td">商品编码</view> <view class="content-th">{{ product.productCode }}</view>
|
|
|
</view>
|
|
|
<view class="content-tr">
|
|
|
- <view class="content-td">库存</view>
|
|
|
- <view class="content-th">{{product.stock}}</view>
|
|
|
+ <view class="content-td">库存</view> <view class="content-th">{{ product.stock }}</view>
|
|
|
</view>
|
|
|
- <view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
|
|
|
- <view class="content-td">{{item.paramsName}}</view>
|
|
|
- <view class="content-th">{{item.paramsContent}}</view>
|
|
|
+ <view class="content-tr" v-if="product.parametersList.length > 0" v-for="(item, index) in product.parametersList" :key="index">
|
|
|
+ <view class="content-td">{{ item.paramsName }}</view> <view class="content-th">{{ item.paramsContent }}</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</div>
|
|
|
- <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
- <view class="tui-flex-1">
|
|
|
- <view class="tui-button" @click="hidePopup()">收起</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tui-bottom-popup>
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <view class="menu" v-if="isShowButton">
|
|
|
- <view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
|
|
|
- <view class="bottom-le">
|
|
|
- <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
|
|
|
- <image src="../../static/icon-home-active@3x.png"></image>
|
|
|
- <text>首页</text>
|
|
|
- </view>
|
|
|
- <view class="item-bt" @click="goSupplier">
|
|
|
- <image src="../../static/icon-shop@3x.png"></image>
|
|
|
- <text>店铺</text>
|
|
|
- </view>
|
|
|
- <view class="item-bt" @click="buyProductCart()">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
|
|
|
- <text>购物车</text>
|
|
|
- <text v-if="hasLogin && goodsData.cartCount>0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[goodsData.cartCount < 10 ? 'goleft':'']">
|
|
|
- {{ goodsData.cartCount >= 100 ? '99+': goodsData.cartCount}}
|
|
|
- </text>
|
|
|
- <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottom-ri">
|
|
|
- <button
|
|
|
- :disabled="goodsData.disabled"
|
|
|
- class="btn btn-cart"
|
|
|
- :class="[goodsData.disabled ? 'disabled':'']"
|
|
|
- @tap.stop="btnGetConfirm('add')">加入购物车</button>
|
|
|
- <button
|
|
|
- :disabled="goodsData.disabled"
|
|
|
- class="btn btn-bay"
|
|
|
- :class="[goodsData.disabled ? 'disabled':'']"
|
|
|
- @tap.stop="btnGetConfirm('buy')">立即购买</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!--底部选择模态层弹窗组件 -->
|
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
|
|
|
- <!-- 遮罩层 -->
|
|
|
- <view class="mask"></view>
|
|
|
- <view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
|
|
|
- <view class="content">
|
|
|
- <view class="layer-smimg">
|
|
|
- <image :src="product.mainImage" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="layer-nunbox">
|
|
|
- <view class="layer-nunbox-t" v-if="product.step === 2">
|
|
|
- <view class="text">*该商品只能以起订量的整数倍购买</view>
|
|
|
- </view>
|
|
|
- <view class="layer-nunbox-t">
|
|
|
- <view class="layer-nunbox-text">数量:</view>
|
|
|
- <view class="number-box">
|
|
|
- <view class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
|
|
|
- <input class="btn-input" type="number" v-model="number" maxlength='4' @blur="changeNumber($event)">
|
|
|
- <view class="iconfont icon-jiahao" :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="layer-nunbox-b">
|
|
|
- <view class="text">单价:
|
|
|
- <text class="p sm">￥</text>
|
|
|
- <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
+ <view class="tui-flex-1"> <view class="tui-button" @click="hidePopup()">收起</view> </view>
|
|
|
</view>
|
|
|
- <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
<!-- 侧边 -->
|
|
|
<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
|
|
|
</view>
|
|
|
@@ -266,1611 +163,1627 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { mapState,mapMutations } from 'vuex'
|
|
|
- import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
|
|
|
- import cmPrice from "@/components/cm-module/productDetails/cm-price.vue" //价格显示
|
|
|
- import cmAttributes from "@/components/cm-module/productDetails/cm-attributes.vue" //规格信息
|
|
|
- import parser from "@/components/jyf-Parser/index" //富文本处理
|
|
|
- import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
- import recommend from "@/components/cm-module/productDetails/recommend" //相关推荐
|
|
|
- import cmParameter from "@/components/cm-module/productDetails/cm-parameter" //相关参数
|
|
|
- import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
|
|
|
- import authorize from '@/common/config/authorize.js'
|
|
|
- import wxLogin from "@/common/config/wxLogin.js"
|
|
|
- import { debounce } from '@/common/config/common.js'
|
|
|
- var isPreviewImg;
|
|
|
- export default{
|
|
|
- components:{
|
|
|
- customP,
|
|
|
- parser,
|
|
|
- tuiSkeleton,
|
|
|
- recommend,
|
|
|
- cmPrice,
|
|
|
- cmAttributes,
|
|
|
- cmParameter,
|
|
|
- cmService
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- clickPath:'/search/pages/search/search',
|
|
|
- html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
|
|
|
- productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
- mode:'round',
|
|
|
- iconClass:'icon-aixin',
|
|
|
- iconColor:'#ff9100',
|
|
|
- specClass: '',//规格弹窗css类，控制开关动画
|
|
|
- isBtnType:'',
|
|
|
- isRequest:false,
|
|
|
- isScrollTop:false,
|
|
|
- current:0,
|
|
|
- shopId:0,
|
|
|
- isShareType:'',
|
|
|
- isHeaderPoduct:false,
|
|
|
- isNavbarFiexd:false,
|
|
|
- navbarFiexd:'none',
|
|
|
- ladderPriceFlag:'',
|
|
|
- ladderPriceList:'',
|
|
|
- isInvalid:false,
|
|
|
- isEvaluate:false,
|
|
|
- isAnimation:false,
|
|
|
- skeletonShow:true,
|
|
|
- isQuantity:false,
|
|
|
- isStock:false,
|
|
|
- disabled:false,
|
|
|
- isNoneDisabled:false,
|
|
|
- tabCurrentIndex:0,
|
|
|
- userID:'',
|
|
|
- shopID:'',
|
|
|
- productID:0,
|
|
|
- userIdentity:0,//用户类型
|
|
|
- goodsData:{},//自定义数据
|
|
|
- shop:{},//供应商信息
|
|
|
- product:{},//采美
|
|
|
- productImage:[],
|
|
|
- retailPrice:0,
|
|
|
- buyRetailPrice:0,
|
|
|
- buyRetailPriceStep:1,
|
|
|
- stock:0,
|
|
|
- number:0,
|
|
|
- minBuyNumber:0,
|
|
|
- productsList:[],
|
|
|
- goodListData:[],
|
|
|
- headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
- systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
- windowHeight: '',
|
|
|
- headerColor:false,
|
|
|
- backPage:1,
|
|
|
- nvabarData: { //顶部自定义导航
|
|
|
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
|
|
|
- title: '' // 导航栏 中间的标题
|
|
|
- },
|
|
|
- linkPath:'',
|
|
|
- CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
- popupShow:false,//参数弹窗
|
|
|
- tabSelectFlag:false,
|
|
|
- sectionPropsArr: [],
|
|
|
- scrollTopArray:[],
|
|
|
- sectionTopRangeArr: [],
|
|
|
- winHeight:'',
|
|
|
- isShowButton:true,
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.productID = option.id;//获取商品ID
|
|
|
- this.isShareType = option.type
|
|
|
- this.linkPath = option.path
|
|
|
- this.isHeaderPoduct = true
|
|
|
- if(option.page == 2){
|
|
|
- this.backPage = option.page
|
|
|
- }
|
|
|
- if(this.isShareType =='share'){
|
|
|
- authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
- console.log(wxResponse)
|
|
|
- if(wxResponse == 1){
|
|
|
- wxLogin.wxLoginAuthorize()
|
|
|
- }else{
|
|
|
- console.log(new Date +'用户未授权微信信息')
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- this.getWinHeight()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','isWxAuthorize','identity'])
|
|
|
- },
|
|
|
- methods:{
|
|
|
- initData(){// 初始化商品详情查询
|
|
|
- this.ProductService.queryProductDetils({userId:this.userID,productID:this.productID,identity:this.identity}).then(response =>{
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
|
|
|
+import cmPrice from '@/components/cm-module/productDetails/cm-price.vue' //价格显示
|
|
|
+import cmAttributes from '@/components/cm-module/productDetails/cm-attributes.vue' //规格信息
|
|
|
+import parser from '@/components/jyf-Parser/index' //富文本处理
|
|
|
+import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
|
|
|
+import recommend from '@/components/cm-module/productDetails/recommend' //相关推荐
|
|
|
+import cmParameter from '@/components/cm-module/productDetails/cm-parameter' //相关参数
|
|
|
+import cmService from '@/components/cm-module/productDetails/cm-service' //服务项目
|
|
|
+import authorize from '@/common/config/authorize.js'
|
|
|
+import wxLogin from '@/common/config/wxLogin.js'
|
|
|
+import { debounce } from '@/common/config/common.js'
|
|
|
+var isPreviewImg
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ customP,
|
|
|
+ parser,
|
|
|
+ tuiSkeleton,
|
|
|
+ recommend,
|
|
|
+ cmPrice,
|
|
|
+ cmAttributes,
|
|
|
+ cmParameter,
|
|
|
+ cmService
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ clickPath: '/search/pages/search/search',
|
|
|
+ html: '<div style="text-align: center;color:#333333;">暂无内容</div>',
|
|
|
+ productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
+ mode: 'round',
|
|
|
+ iconClass: 'icon-aixin',
|
|
|
+ iconColor: '#ff9100',
|
|
|
+ specClass: '', //规格弹窗css类，控制开关动画
|
|
|
+ isBtnType: '',
|
|
|
+ isRequest: false,
|
|
|
+ isScrollTop: false,
|
|
|
+ current: 0,
|
|
|
+ shopId: 0,
|
|
|
+ isShareType: '',
|
|
|
+ isHeaderPoduct: false,
|
|
|
+ isNavbarFiexd: false,
|
|
|
+ navbarFiexd: 'none',
|
|
|
+ ladderPriceFlag: '',
|
|
|
+ ladderPriceList: '',
|
|
|
+ isInvalid: false,
|
|
|
+ isEvaluate: false,
|
|
|
+ isAnimation: false,
|
|
|
+ skeletonShow: true,
|
|
|
+ isQuantity: false,
|
|
|
+ isStock: false,
|
|
|
+ disabled: false,
|
|
|
+ isNoneDisabled: false,
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ userID: '',
|
|
|
+ shopID: '',
|
|
|
+ productID: 0,
|
|
|
+ userIdentity: 0, //用户类型
|
|
|
+ goodsData: {}, //自定义数据
|
|
|
+ shop: {}, //供应商信息
|
|
|
+ product: {}, //采美
|
|
|
+ productImage: [],
|
|
|
+ retailPrice: 0,
|
|
|
+ buyRetailPrice: 0,
|
|
|
+ buyRetailPriceStep: 1,
|
|
|
+ stock: 0,
|
|
|
+ number: 0,
|
|
|
+ minBuyNumber: 0,
|
|
|
+ productsList: [],
|
|
|
+ goodListData: [],
|
|
|
+ headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
+ systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ windowHeight: '',
|
|
|
+ headerColor: false,
|
|
|
+ backPage: 1,
|
|
|
+ nvabarData: {
|
|
|
+ //顶部自定义导航
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
|
|
|
+ title: '' // 导航栏 中间的标题
|
|
|
+ },
|
|
|
+ linkPath: '',
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ popupShow: false, //参数弹窗
|
|
|
+ tabSelectFlag: false,
|
|
|
+ sectionPropsArr: [],
|
|
|
+ scrollTopArray: [],
|
|
|
+ sectionTopRangeArr: [],
|
|
|
+ winHeight: '',
|
|
|
+ isShowButton: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.productID = option.id //获取商品ID
|
|
|
+ this.isShareType = option.type
|
|
|
+ this.linkPath = option.path
|
|
|
+ this.isHeaderPoduct = true
|
|
|
+ if (option.page == 2) {
|
|
|
+ this.backPage = option.page
|
|
|
+ }
|
|
|
+ if (this.isShareType == 'share') {
|
|
|
+ authorize.getSetting().then(wxResponse => {
|
|
|
+ // console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
+ console.log(wxResponse)
|
|
|
+ if (wxResponse == 1) {
|
|
|
+ wxLogin.wxLoginAuthorize()
|
|
|
+ } else {
|
|
|
+ console.log(new Date() + '用户未授权微信信息')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.getWinHeight()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'isWxAuthorize', 'identity'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ // 初始化商品详情查询
|
|
|
+ this.ProductService.queryProductDetils({
|
|
|
+ userId: this.userID,
|
|
|
+ productID: this.productID,
|
|
|
+ identity: this.identity
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
this.skeletonShow = false
|
|
|
- this.productImage=[];
|
|
|
+ this.productImage = []
|
|
|
this.shop = response.data.shop
|
|
|
this.shopId = response.data.shopID
|
|
|
this.product = response.data
|
|
|
//已删除/已冻结
|
|
|
- if(this.product.validFlag === '0'){
|
|
|
+ if (this.product.validFlag === '0') {
|
|
|
this.isInvalid = true
|
|
|
}
|
|
|
- this.ladderPriceFlag = this.product.ladderPriceFlag;
|
|
|
+ this.ladderPriceFlag = this.product.ladderPriceFlag
|
|
|
this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
|
|
|
this.stock = this.product.stock
|
|
|
this.buyRetailPriceStep = this.product.step
|
|
|
this.number = this.product.minBuyNumber
|
|
|
- this.minBuyNumber = this.product.minBuyNumber
|
|
|
+ this.minBuyNumber = this.product.minBuyNumber
|
|
|
//处理商品图片列表
|
|
|
- this.product.imageList.forEach(item =>{
|
|
|
- this.productImage.push(item.image);
|
|
|
+ this.product.imageList.forEach(item => {
|
|
|
+ this.productImage.push(item.image)
|
|
|
})
|
|
|
//购物车数量
|
|
|
this.goodsData.cartCount = this.product.productCount
|
|
|
//处理阶梯价格
|
|
|
- if(this.product.ladderPriceList!=null){
|
|
|
- this.ladderPriceList = this.product.ladderPriceList;
|
|
|
+ if (this.product.ladderPriceList != null) {
|
|
|
+ this.ladderPriceList = this.product.ladderPriceList
|
|
|
}
|
|
|
//拆分金额并转千分位格式显示
|
|
|
- if(this.product.retailPrice!=null){
|
|
|
- this.retailPrice = this.product.retailPrice.toFixed(2);
|
|
|
- this.buyRetailPrice = this.product.retailPrice;
|
|
|
+ if (this.product.retailPrice != null) {
|
|
|
+ this.retailPrice = this.product.retailPrice.toFixed(2)
|
|
|
+ this.buyRetailPrice = this.product.retailPrice
|
|
|
}
|
|
|
//处理下架商品和售罄商品
|
|
|
- if(this.product.validFlag =='3' || this.product.validFlag =='10' || this.stock == 0 ){
|
|
|
+ if (this.product.validFlag == '3' || this.product.validFlag == '10' || this.stock == 0) {
|
|
|
this.disabled = true
|
|
|
this.isNoneDisabled = true
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.disabled = false
|
|
|
this.isNoneDisabled = false
|
|
|
this.goodsData.disabledText = ''
|
|
|
}
|
|
|
- if(this.product.price1TextFlag == "1"){
|
|
|
+ if (this.product.price1TextFlag == '1') {
|
|
|
this.disabled = true
|
|
|
}
|
|
|
- if(this.product.price1TextFlag == "2"){
|
|
|
- if(this.userIdentity == 4){
|
|
|
+ if (this.product.price1TextFlag == '2') {
|
|
|
+ if (this.userIdentity == 4) {
|
|
|
this.disabled = true
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.disabled = false
|
|
|
}
|
|
|
}
|
|
|
this.goodsData.disabled = this.disabled
|
|
|
this.goodsData.isNoneDisabled = this.isNoneDisabled
|
|
|
- if(this.product.validFlag =='3'){
|
|
|
+ if (this.product.validFlag == '3') {
|
|
|
this.goodsData.disabledText = '下架'
|
|
|
}
|
|
|
- if(this.product.validFlag =='10'){
|
|
|
+ if (this.product.validFlag == '10') {
|
|
|
this.goodsData.disabledText = '停售'
|
|
|
}
|
|
|
- if(this.stock == 0){
|
|
|
+ if (this.stock == 0) {
|
|
|
this.goodsData.disabledText = '售罄'
|
|
|
}
|
|
|
- setTimeout(()=>{
|
|
|
- this.getSectionProps();
|
|
|
- },2000)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getSectionProps()
|
|
|
+ }, 2000)
|
|
|
this.isRequest = true
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
})
|
|
|
- },
|
|
|
- swiperChange(e) {//顶部商品图片切换
|
|
|
- const index = e.detail.current;
|
|
|
- this.current = index;
|
|
|
- },
|
|
|
- previewImg (index) {//顶部商品图片预览
|
|
|
- isPreviewImg = true
|
|
|
- let previewUrls = this.productImage
|
|
|
- uni.previewImage({
|
|
|
- current: index, //图片索引
|
|
|
- urls: previewUrls, //必须是http图片，本地图片无效
|
|
|
- longPressActions:''
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
})
|
|
|
- },
|
|
|
- tabClick(index) {//商品详情&&供应商信息tab切换
|
|
|
- this.tabSelectFlag = true
|
|
|
- this.tabCurrentIndex = index;
|
|
|
- let classIndex = '.product-details'+index;
|
|
|
- uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
- uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
- uni.pageScrollTo({
|
|
|
- duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
- scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
- })
|
|
|
- setTimeout(()=>{
|
|
|
- this.tabSelectFlag = false;
|
|
|
- },500)
|
|
|
- }).exec()
|
|
|
- }).exec()
|
|
|
- },
|
|
|
- handleContact(e){//跳转小程序客服
|
|
|
-
|
|
|
- },
|
|
|
- buyProductCart(){//底部购物车按钮点击
|
|
|
- authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
- if(wxResponse == 1){
|
|
|
- if(this.hasLogin){
|
|
|
- this.$api.navigateTo('/pages/goods/cart')
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/authorization/authorization?type=1')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- btnGetConfirm(type){//加入购物车&&立即购买点击
|
|
|
- authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
- if(wxResponse == 1){
|
|
|
- if(this.hasLogin){
|
|
|
- this.showSpec(type);
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/authorization/authorization?type=1')
|
|
|
- }
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ //顶部商品图片切换
|
|
|
+ const index = e.detail.current
|
|
|
+ this.current = index
|
|
|
+ },
|
|
|
+ previewImg(index) {
|
|
|
+ //顶部商品图片预览
|
|
|
+ isPreviewImg = true
|
|
|
+ let previewUrls = this.productImage
|
|
|
+ uni.previewImage({
|
|
|
+ current: index, //图片索引
|
|
|
+ urls: previewUrls, //必须是http图片，本地图片无效
|
|
|
+ longPressActions: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tabClick(index) {
|
|
|
+ //商品详情&&供应商信息tab切换
|
|
|
+ this.tabSelectFlag = true
|
|
|
+ this.tabCurrentIndex = index
|
|
|
+ let classIndex = '.product-details' + index
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('.container-product-main')
|
|
|
+ .boundingClientRect(data => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select(classIndex)
|
|
|
+ .boundingClientRect(res => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.pageScrollTo({
|
|
|
+ duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
+ scrollTop: res.top - data.top - 150 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tabSelectFlag = false
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
})
|
|
|
- },
|
|
|
- changeCountAdd(){//popup弹窗数量增加按钮
|
|
|
- if(this.buyRetailPriceStep == 2){
|
|
|
- this.number+=this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number++
|
|
|
- }
|
|
|
- this.processActivityPrice()
|
|
|
- },
|
|
|
- changeCountSub(){//popup弹窗数量减按钮
|
|
|
- if(this.number<=this.minBuyNumber){
|
|
|
- this.number= this.minBuyNumber
|
|
|
- this.isQuantity =true
|
|
|
- this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
|
|
|
- return
|
|
|
- }else{
|
|
|
- if(this.buyRetailPriceStep == 2){
|
|
|
- this.number-=this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number--
|
|
|
+ .exec()
|
|
|
+ },
|
|
|
+ handleContact(e) {
|
|
|
+ //跳转小程序客服
|
|
|
+ },
|
|
|
+ processActivityPrice() {
|
|
|
+ //单独处理活动价格和阶梯价格
|
|
|
+ if ((this.ladderPriceFlag == '0' && this.product.actStatus == 0) || this.product.actStatus == 1) {
|
|
|
+ this.buyRetailPrice = this.product.retailPrice
|
|
|
+ } else {
|
|
|
+ this.ladderPriceList.forEach((item, index) => {
|
|
|
+ if (this.number >= item.buyNum) {
|
|
|
+ this.buyRetailPrice = item.buyPrice
|
|
|
}
|
|
|
- this.processActivityPrice()
|
|
|
- this.isQuantity =false
|
|
|
- }
|
|
|
- },
|
|
|
- changeNumber(e){
|
|
|
- let _value = e.detail.value;
|
|
|
- if(!this.$api.isNumber(_value)){
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else if(_value < this.minBuyNumber){
|
|
|
- this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else if( _value % this.minBuyNumber !=0 ){
|
|
|
- this.$util.msg(`购买量必须为起订量的整数倍`,2000);
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number = e.detail.value
|
|
|
- }
|
|
|
- this.processActivityPrice()
|
|
|
- },
|
|
|
- processActivityPrice(){//单独处理活动价格和阶梯价格
|
|
|
- if(this.ladderPriceFlag == '0' && this.product.actStatus == 0 || this.product.actStatus == 1){
|
|
|
- this.buyRetailPrice = this.product.retailPrice
|
|
|
- }else{
|
|
|
- this.ladderPriceList.forEach((item,index)=>{
|
|
|
- if(this.number>=item.buyNum){
|
|
|
- this.buyRetailPrice = item.buyPrice
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- showSpec(type) {//显示选择数量确认弹窗
|
|
|
- this.isBtnType = type
|
|
|
- this.specClass = 'show';
|
|
|
- },
|
|
|
- hideSpec() {//关闭选择数量确认弹窗
|
|
|
- this.specClass = 'hide';
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
|
|
|
- if(this.isBtnType == 'add'){
|
|
|
- this.getAddProductCart()
|
|
|
- }else{
|
|
|
- this.toConfirmation()
|
|
|
- }
|
|
|
- },
|
|
|
- toConfirmation(){//跳转确认订单页面
|
|
|
- this.specClass = 'hide';
|
|
|
- let productStp ={
|
|
|
- allPrice:this.number*this.buyRetailPrice,
|
|
|
- allCount:this.number,
|
|
|
- productID:this.product.productID,
|
|
|
- productCount:this.number
|
|
|
- }
|
|
|
- this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- getAddProductCart(){//增加购物车成功和toast弹窗提示成功
|
|
|
- this.ProductService.shoppingAddCart({productID:this.productID,userID:this.userID,productCount:this.number}).then(response => {
|
|
|
- this.specClass = 'hide';
|
|
|
- this.$util.msg('加入购物车成功',1500,true,'success')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showSpec(type) {
|
|
|
+ //显示选择数量确认弹窗
|
|
|
+ this.isBtnType = type
|
|
|
+ this.specClass = 'show'
|
|
|
+ },
|
|
|
+ hideSpec() {
|
|
|
+ //关闭选择数量确认弹窗
|
|
|
+ this.specClass = 'hide'
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none'
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ btnConfirm() {
|
|
|
+ //加入购物车&&立即购买跳转订单页并关闭弹窗
|
|
|
+ if (this.isBtnType == 'add') {
|
|
|
+ this.getAddProductCart()
|
|
|
+ } else {
|
|
|
+ this.toConfirmation()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toConfirmation() {
|
|
|
+ //跳转确认订单页面
|
|
|
+ this.specClass = 'hide'
|
|
|
+ let productStp = {
|
|
|
+ allPrice: this.number * this.buyRetailPrice,
|
|
|
+ allCount: this.number,
|
|
|
+ productID: this.product.productID,
|
|
|
+ productCount: this.number
|
|
|
+ }
|
|
|
+ this.$api.navigateTo(
|
|
|
+ `/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({
|
|
|
+ data: productStp
|
|
|
+ })}`
|
|
|
+ )
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none'
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ getAddProductCart() {
|
|
|
+ //增加购物车成功和toast弹窗提示成功
|
|
|
+ this.ProductService.shoppingAddCart({
|
|
|
+ productID: this.productID,
|
|
|
+ userID: this.userID,
|
|
|
+ productCount: this.number
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.specClass = 'hide'
|
|
|
+ this.$util.msg('加入购物车成功', 1500, true, 'success')
|
|
|
this.isAnimation = true
|
|
|
- setTimeout(() => {this.specClass = 'none'}, 200)
|
|
|
- setTimeout(() => {this.isAnimation = false},2000)
|
|
|
- this.goodsData.cartCount = response.data;
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none'
|
|
|
+ }, 200)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isAnimation = false
|
|
|
+ }, 2000)
|
|
|
+ this.goodsData.cartCount = response.data
|
|
|
})
|
|
|
- },
|
|
|
- navToLogin(){
|
|
|
- authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
- if(wxResponse == 1){
|
|
|
- this.$store.commit('setLoginType',8)
|
|
|
- this.$store.commit('setLoginProductId',this.productID)
|
|
|
- this.$api.navigateTo(`/pages/login/login?id=${this.productID}`)
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/authorization/authorization?type=1')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- setHeaderBtnPosi(){
|
|
|
- // 获得胶囊按钮位置信息
|
|
|
- let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
|
|
|
- return headerBtnPosi
|
|
|
- },
|
|
|
- setSysteminfo(){
|
|
|
- let systeminfo;
|
|
|
- uni.getSystemInfo({ // 获取设备信息
|
|
|
- success: (res) => {
|
|
|
- systeminfo = res
|
|
|
- },
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
})
|
|
|
- return systeminfo
|
|
|
- },
|
|
|
- goIndex(){//商城首页
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/tabBar/home/index'
|
|
|
- });
|
|
|
- },
|
|
|
- goSupplier(){//跳供应商资料页
|
|
|
- this.$api.navigateTo('/supplier/pages/user/my-shop?shopId='+this.shopId)
|
|
|
- },
|
|
|
- discard(){
|
|
|
- //丢弃
|
|
|
- },
|
|
|
- onShare(res){//分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&id=${this.productID}`,
|
|
|
- imageUrl:`${this.productImage[0]}`
|
|
|
+ },
|
|
|
+ navToLogin() {
|
|
|
+ authorize.getSetting().then(wxResponse => {
|
|
|
+ // console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
+ if (wxResponse == 1) {
|
|
|
+ this.$store.commit('setLoginType', 8)
|
|
|
+ this.$store.commit('setLoginProductId', this.productID)
|
|
|
+ this.$api.navigateTo(`/pages/login/login?id=${this.productID}`)
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo('/pages/authorization/authorization?type=1')
|
|
|
}
|
|
|
- },
|
|
|
- showPopup(){
|
|
|
- this.popupShow = true
|
|
|
- },
|
|
|
- hidePopup(){
|
|
|
- this.popupShow = false
|
|
|
- },
|
|
|
- getSectionProps() {//获取每个tab对应区域的scrollTop值
|
|
|
- let className = '.product-details',
|
|
|
- sectionPropsArr = [];
|
|
|
- uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
- uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
- res.forEach((item, index) => {
|
|
|
- sectionPropsArr.push({
|
|
|
- className: `${className}${index}`,
|
|
|
- scrollTop: item.top - data.top - 150
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setHeaderBtnPosi() {
|
|
|
+ // 获得胶囊按钮位置信息
|
|
|
+ let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
+ return headerBtnPosi
|
|
|
+ },
|
|
|
+ setSysteminfo() {
|
|
|
+ let systeminfo
|
|
|
+ uni.getSystemInfo({
|
|
|
+ // 获取设备信息
|
|
|
+ success: res => {
|
|
|
+ systeminfo = res
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return systeminfo
|
|
|
+ },
|
|
|
+ goIndex() {
|
|
|
+ //商城首页
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/home/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goSupplier() {
|
|
|
+ //跳供应商资料页
|
|
|
+ this.$api.navigateTo('/supplier/pages/user/my-shop?shopId=' + this.shopId)
|
|
|
+ },
|
|
|
+ discard() {
|
|
|
+ //丢弃
|
|
|
+ },
|
|
|
+ onShare(res) {
|
|
|
+ //分享转发
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `${this.product.name}`,
|
|
|
+ path: `pages/goods/product?type=share&id=${this.productID}`,
|
|
|
+ imageUrl: `${this.productImage[0]}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showPopup() {
|
|
|
+ this.popupShow = true
|
|
|
+ },
|
|
|
+ hidePopup() {
|
|
|
+ this.popupShow = false
|
|
|
+ },
|
|
|
+ getSectionProps() {
|
|
|
+ //获取每个tab对应区域的scrollTop值
|
|
|
+ let className = '.product-details',
|
|
|
+ sectionPropsArr = []
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('.container-product-main')
|
|
|
+ .boundingClientRect(data => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .selectAll(className)
|
|
|
+ .boundingClientRect(res => {
|
|
|
+ //最外层盒子节点
|
|
|
+ res.forEach((item, index) => {
|
|
|
+ sectionPropsArr.push({
|
|
|
+ className: `${className}${index}`,
|
|
|
+ scrollTop: item.top - data.top - 150
|
|
|
+ })
|
|
|
})
|
|
|
+ this.sectionPropsArr = sectionPropsArr
|
|
|
+ this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr)
|
|
|
})
|
|
|
- this.sectionPropsArr = sectionPropsArr;
|
|
|
- this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
|
|
|
- }).exec()
|
|
|
- }).exec()
|
|
|
- },
|
|
|
- getSectionRange(arr) {// 获取每个tab对应区域的区间
|
|
|
- let sectionScrollTopList = [];
|
|
|
- for(let i = 0; i < arr.length; i++) {
|
|
|
- let thisScrollTop = arr[i].scrollTop;
|
|
|
- if(i < arr.length - 1) {
|
|
|
- let nextScrollTop = arr[i+1].scrollTop;
|
|
|
- if(i == 0) {
|
|
|
- sectionScrollTopList.push(`0-${thisScrollTop}`);
|
|
|
- } else if(i == arr.length - 1){
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
|
|
|
- } else {
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
|
|
|
- }
|
|
|
+ .exec()
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
+ },
|
|
|
+ getSectionRange(arr) {
|
|
|
+ // 获取每个tab对应区域的区间
|
|
|
+ let sectionScrollTopList = []
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ let thisScrollTop = arr[i].scrollTop
|
|
|
+ if (i < arr.length - 1) {
|
|
|
+ let nextScrollTop = arr[i + 1].scrollTop
|
|
|
+ if (i == 0) {
|
|
|
+ sectionScrollTopList.push(`0-${thisScrollTop}`)
|
|
|
+ } else if (i == arr.length - 1) {
|
|
|
+ sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`)
|
|
|
} else {
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
|
|
|
+ sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`)
|
|
|
}
|
|
|
+ } else {
|
|
|
+ sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop + 500}`)
|
|
|
}
|
|
|
- return sectionScrollTopList;
|
|
|
- },
|
|
|
- activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
|
|
|
- const { sectionTopRangeArr } = _this;
|
|
|
- if(sectionTopRangeArr.length > 0) {
|
|
|
+ }
|
|
|
+ return sectionScrollTopList
|
|
|
+ },
|
|
|
+ activeTab: debounce(
|
|
|
+ (top, _this) => {
|
|
|
+ //当滑动时也能同步激活tab
|
|
|
+ const { sectionTopRangeArr } = _this
|
|
|
+ if (sectionTopRangeArr.length > 0) {
|
|
|
sectionTopRangeArr.forEach((item, index) => {
|
|
|
let splitItem = item.split('-'),
|
|
|
openInterval = Number(splitItem[0]),
|
|
|
- closedInterval = Number(splitItem[1]);
|
|
|
- if(top >= openInterval && top < closedInterval) {
|
|
|
- _this.tabCurrentIndex = index;
|
|
|
+ closedInterval = Number(splitItem[1])
|
|
|
+ if (top >= openInterval && top < closedInterval) {
|
|
|
+ _this.tabCurrentIndex = index
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- },100, true),
|
|
|
- getWinHeight() {
|
|
|
- this.winHeight = wx.getSystemInfoSync().windowHeight;
|
|
|
},
|
|
|
- },
|
|
|
- onPageScroll(e){//实时获取到滚动的值
|
|
|
- const { scrollTop } = e;
|
|
|
- if(!this.tabSelectFlag) {
|
|
|
- this.activeTab(scrollTop, this);
|
|
|
- }
|
|
|
- if(e.scrollTop>60){
|
|
|
- this.headerColor = true
|
|
|
- this.navbarFiexd = 'fixed'
|
|
|
- this.isNavbarFiexd = true
|
|
|
- this.nvabarData={
|
|
|
- showCapsule: 1,
|
|
|
- title: '商品详情',
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.headerColor = false
|
|
|
- this.isNavbarFiexd = false
|
|
|
- this.navbarFiexd = 'none'
|
|
|
- this.nvabarData={
|
|
|
- showCapsule: 1,
|
|
|
- title: '',
|
|
|
- }
|
|
|
- }
|
|
|
- if(e.scrollTop>700){
|
|
|
- this.isScrollTop = true
|
|
|
- }else{
|
|
|
- this.isScrollTop = false
|
|
|
+ 100,
|
|
|
+ true
|
|
|
+ ),
|
|
|
+ getWinHeight() {
|
|
|
+ this.winHeight = wx.getSystemInfoSync().windowHeight
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ const { scrollTop } = e
|
|
|
+ if (!this.tabSelectFlag) {
|
|
|
+ this.activeTab(scrollTop, this)
|
|
|
+ }
|
|
|
+ if (e.scrollTop > 60) {
|
|
|
+ this.headerColor = true
|
|
|
+ this.navbarFiexd = 'fixed'
|
|
|
+ this.isNavbarFiexd = true
|
|
|
+ this.nvabarData = {
|
|
|
+ showCapsule: 1,
|
|
|
+ title: '商品详情'
|
|
|
}
|
|
|
- },
|
|
|
- onShareAppMessage(res){//分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&id=${this.productID}`,
|
|
|
- imageUrl:`${this.productImage[0]}`
|
|
|
+ } else {
|
|
|
+ this.headerColor = false
|
|
|
+ this.isNavbarFiexd = false
|
|
|
+ this.navbarFiexd = 'none'
|
|
|
+ this.nvabarData = {
|
|
|
+ showCapsule: 1,
|
|
|
+ title: ''
|
|
|
}
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.$api.getStorage().then((resolve) => {
|
|
|
- this.userID = resolve.userID ? resolve.userID : '';
|
|
|
+ }
|
|
|
+ if (e.scrollTop > 700) {
|
|
|
+ this.isScrollTop = true
|
|
|
+ } else {
|
|
|
+ this.isScrollTop = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ //分享转发
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `${this.product.name}`,
|
|
|
+ path: `pages/goods/product?type=share&id=${this.productID}`,
|
|
|
+ imageUrl: `${this.productImage[0]}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$api
|
|
|
+ .getStorage()
|
|
|
+ .then(resolve => {
|
|
|
+ this.userID = resolve.userID ? resolve.userID : ''
|
|
|
this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
|
|
|
- this.shopID = resolve.shopID ? resolve.shopID : '';
|
|
|
- if(this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4){
|
|
|
+ this.shopID = resolve.shopID ? resolve.shopID : ''
|
|
|
+ if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
|
|
|
this.isShowButton = true
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.isShowButton = false
|
|
|
- }
|
|
|
+ }
|
|
|
if (isPreviewImg) {
|
|
|
- isPreviewImg = false;
|
|
|
- return;
|
|
|
+ isPreviewImg = false
|
|
|
+ return
|
|
|
} else {
|
|
|
- this.initData();
|
|
|
+ this.initData()
|
|
|
}
|
|
|
- }).catch(error =>{
|
|
|
- this.initData();
|
|
|
})
|
|
|
- }
|
|
|
+ .catch(error => {
|
|
|
+ this.initData()
|
|
|
+ })
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page{
|
|
|
- background-color: #FFFFFF;
|
|
|
+page {
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.banner-section {
|
|
|
+ width: 100%;
|
|
|
+ height: 750rpx;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.banner {
|
|
|
+ width: 100%;
|
|
|
+ height: 750rpx;
|
|
|
+ .product-img {
|
|
|
+ width: 750rpx;
|
|
|
}
|
|
|
- .banner-section{
|
|
|
- width: 100%;
|
|
|
- height: 750rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .banner{
|
|
|
+ image {
|
|
|
width: 100%;
|
|
|
- height: 750rpx;
|
|
|
- .product-img{
|
|
|
- width: 750rpx;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper__dots-box{
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- bottom: 30rpx;
|
|
|
- right: 0;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- .product-wrap{
|
|
|
+}
|
|
|
+.swiper__dots-box {
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ bottom: 30rpx;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.product-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 24rpx 0 0 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ .productRemarks {
|
|
|
+ height: 48rpx;
|
|
|
width: 100%;
|
|
|
+ float: left;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .wrap-top {
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
height: auto;
|
|
|
- padding: 24rpx 0 0 0;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-bottom: 20rpx solid #F7F7F7;
|
|
|
- .productRemarks{
|
|
|
- height: 48rpx;
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- text-align: left;
|
|
|
+ float: left;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
+ &.none {
|
|
|
+ .p-title {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
- .wrap-top{
|
|
|
- width: 702rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
+ .p-title {
|
|
|
+ width: 100%;
|
|
|
height: auto;
|
|
|
float: left;
|
|
|
- padding-bottom:20rpx;
|
|
|
- border-bottom: 1px solid #F8F8F8;
|
|
|
- &.none{
|
|
|
- .p-title{
|
|
|
- color:#999999
|
|
|
- }
|
|
|
- }
|
|
|
- .p-title{
|
|
|
- width: 100%;
|
|
|
+ position: relative;
|
|
|
+ .p-title-name {
|
|
|
+ width: 602rpx;
|
|
|
height: auto;
|
|
|
float: left;
|
|
|
- position: relative;
|
|
|
- .p-title-name{
|
|
|
- width:602rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- line-height:48rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- &.indent{
|
|
|
- text-indent: 95rpx;
|
|
|
- }
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ &.indent {
|
|
|
+ text-indent: 95rpx;
|
|
|
}
|
|
|
- .mclap-tag{
|
|
|
- display: block;
|
|
|
- width: 84rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
- border-radius: 4rpx 48rpx 4px 4px;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 6rpx;
|
|
|
+ }
|
|
|
+ .mclap-tag {
|
|
|
+ display: block;
|
|
|
+ width: 84rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
+ border-radius: 4rpx 48rpx 4px 4px;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 6rpx;
|
|
|
+ }
|
|
|
+ .p-title-share {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: block;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 0;
|
|
|
+ border: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 8rpx 0;
|
|
|
+ z-index: 990;
|
|
|
+ .icon-fenxiang1 {
|
|
|
+ font-size: $font-size-34;
|
|
|
}
|
|
|
- .p-title-share{
|
|
|
- width: 96rpx;
|
|
|
- height: 96rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- color: #999999;
|
|
|
- font-size: $font-size-24;
|
|
|
- box-sizing: border-box;
|
|
|
- display: block;
|
|
|
- background: transparent;
|
|
|
- border-radius: 0;
|
|
|
- border: 0;
|
|
|
- margin: 0;
|
|
|
- padding: 8rpx 0;
|
|
|
- z-index: 990;
|
|
|
- .icon-fenxiang1{
|
|
|
- font-size: $font-size-34;
|
|
|
+ }
|
|
|
+ .tui-share-btn::after {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-main-text {
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #ff2a2a;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .wrap-main-none {
|
|
|
+ display: block;
|
|
|
+ width: 256rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ border-radius: 11rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ float: right;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-price-none {
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ .p-minBuy {
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ float: right;
|
|
|
+ padding: 0 18rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ .min-text {
|
|
|
+ margin: 0 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .p-login {
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: $color-system;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ &.grade {
|
|
|
+ .price-left {
|
|
|
+ float: left;
|
|
|
+ .none {
|
|
|
+ display: block;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #4a4b54;
|
|
|
+ float: left;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ text {
|
|
|
+ letter-spacing: 4rpx;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .tui-share-btn::after {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
}
|
|
|
- .wrap-main-text{
|
|
|
- line-height: 56rpx;
|
|
|
- color: #FF2A2A;
|
|
|
- font-size: $font-size-26;
|
|
|
- display: block;
|
|
|
+ .p-no {
|
|
|
float: left;
|
|
|
- font-weight: normal;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
}
|
|
|
- .wrap-main-none{
|
|
|
+ .p-login-btn {
|
|
|
display: block;
|
|
|
- width: 256rpx;
|
|
|
height: 44rpx;
|
|
|
- padding-left: 20rpx;
|
|
|
+ padding: 0 10rpx 0 20rpx;
|
|
|
border-radius: 11rpx;
|
|
|
background: $btn-confirm;
|
|
|
float: right;
|
|
|
line-height: 44rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
text-align: center;
|
|
|
font-size: $font-size-24;
|
|
|
}
|
|
|
-
|
|
|
- .p-price-none{
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #666;
|
|
|
- text-decoration: line-through;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- .p-minBuy{
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- float: right;
|
|
|
- padding: 0 18rpx;
|
|
|
- border-radius: 22rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- color: #7F7F7F;
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- .min-text{
|
|
|
- margin: 0 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .p-login{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-label {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .label-a {
|
|
|
+ padding: 0 18rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: #ffe6dc;
|
|
|
+ margin: 0 20rpx 15rpx 0;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap-top-price {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .wrap-main-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ .p-price {
|
|
|
height: 56rpx;
|
|
|
line-height: 56rpx;
|
|
|
- color: $color-system;
|
|
|
- font-size: $font-size-24;
|
|
|
- &.grade{
|
|
|
- .price-left{
|
|
|
- float: left;
|
|
|
- .none{
|
|
|
- display: block;
|
|
|
- font-size: $font-size-20;
|
|
|
- line-height: 48rpx;
|
|
|
- color: #4A4B54;
|
|
|
- float: left;
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 5rpx;
|
|
|
- text{
|
|
|
- letter-spacing: 4rpx;
|
|
|
- font-size: $font-size-32;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ float: left;
|
|
|
+ color: #ff2a2a;
|
|
|
+ font-weight: bold;
|
|
|
+ &.none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: normal;
|
|
|
}
|
|
|
- .p-no{
|
|
|
- float: left;
|
|
|
- margin-right: 5rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
+ .txt {
|
|
|
+ margin: 0 2rpx;
|
|
|
}
|
|
|
- .p-login-btn{
|
|
|
- display: block;
|
|
|
- height: 44rpx;
|
|
|
- padding: 0 10rpx 0 20rpx;
|
|
|
- border-radius: 11rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- float: right;
|
|
|
- line-height: 44rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
+ .txt.sm {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .txt.big {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .wrap-label{
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
+ .floor-item-act {
|
|
|
+ height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
box-sizing: border-box;
|
|
|
- .label-a{
|
|
|
- padding: 0 18rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- color:$color-system;
|
|
|
- text-align: center;
|
|
|
+ float: left;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ .floor-tags {
|
|
|
+ float: right;
|
|
|
+ height: 28rpx;
|
|
|
border-radius: 6rpx;
|
|
|
- background:#ffe6dc;
|
|
|
- margin: 0 20rpx 15rpx 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
display: inline-block;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ border: 1px solid #e15616;
|
|
|
}
|
|
|
}
|
|
|
- .wrap-top-price{
|
|
|
+ .floor-item-btn {
|
|
|
float: left;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- .wrap-main-item{
|
|
|
- width: 100%;
|
|
|
- height: 56rpx;
|
|
|
- .p-price{
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- float: left;
|
|
|
- color: #FF2A2A;
|
|
|
- font-weight: bold;
|
|
|
- &.none{
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- .txt{
|
|
|
- margin:0 2rpx;
|
|
|
- }
|
|
|
- .txt.sm{
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- .txt.big{
|
|
|
- font-size: $font-size-34;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-act{
|
|
|
- height: 56rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- padding:10rpx 0;
|
|
|
- margin-left: 10rpx;
|
|
|
- .floor-tags{
|
|
|
- float: right;
|
|
|
- height: 28rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- line-height: 28rpx;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding:0 16rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- margin-left: 15rpx;
|
|
|
- border: 1px solid #E15616;
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-btn{
|
|
|
- float: left;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ .btn {
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
height: 40rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- .btn{
|
|
|
- line-height: 40rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: $font-size-20;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
+ background: $btn-confirm;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border-radius: 4rpx;
|
|
|
}
|
|
|
}
|
|
|
- .wrap-info{
|
|
|
- float: left;
|
|
|
- width: 702rpx;
|
|
|
- padding: 24rpx 24rpx 0 24rpx;
|
|
|
- border-bottom: 1px solid #F8F8F8;
|
|
|
- .info-viewT{
|
|
|
- width: 100%;
|
|
|
- min-height: 40rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: left;
|
|
|
- &.none{
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .info-viewL{
|
|
|
- min-width: 350rpx;
|
|
|
- float: left;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- .info-viewR{
|
|
|
- min-width: 352rpx;
|
|
|
- float: left;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .wrap-info {
|
|
|
+ float: left;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
+ .info-viewT {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.none {
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
- .info-viewB{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
+ .info-viewL {
|
|
|
+ min-width: 350rpx;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
- .info-f{
|
|
|
- width: 50%;
|
|
|
+ .info-viewR {
|
|
|
+ min-width: 352rpx;
|
|
|
float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- line-height: 40rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
- text-align: left;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .product-seve{
|
|
|
- width: 100%;
|
|
|
- height: 60rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- line-height: 60rpx;
|
|
|
- .label{
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .iconfont{
|
|
|
- color: #fea785;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- }
|
|
|
- .text{
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #fea785;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-item-none{
|
|
|
- min-height: 348rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 20rpx solid #F7F7F7;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40rpx 0;
|
|
|
- .none-image{
|
|
|
- width: 284rpx;
|
|
|
- height: 225rpx;
|
|
|
+ .info-viewB {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
}
|
|
|
- .none-text{
|
|
|
- text-align: center;
|
|
|
+ .info-f {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
font-size: $font-size-28;
|
|
|
- color: #fea785;
|
|
|
+ color: $text-color;
|
|
|
line-height: 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
}
|
|
|
- .product-parameter{
|
|
|
- width: 702rpx;
|
|
|
- height: 90rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- border-bottom: 20rpx solid #F7F7F7;
|
|
|
- .title{
|
|
|
- line-height: 90rpx;
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #666666;
|
|
|
+}
|
|
|
+.product-seve {
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .label {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ color: #fea785;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #fea785;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-item-none {
|
|
|
+ min-height: 348rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx 0;
|
|
|
+ .none-image {
|
|
|
+ width: 284rpx;
|
|
|
+ height: 225rpx;
|
|
|
+ }
|
|
|
+ .none-text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #fea785;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-parameter {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ .title {
|
|
|
+ line-height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ float: right;
|
|
|
+ line-height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ float: right;
|
|
|
+ padding-right: 48rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .icon-chakangengduo {
|
|
|
+ line-height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 48rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-supplier {
|
|
|
+ width: 100%;
|
|
|
+ height: 174rpx;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ .logo {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ float: left;
|
|
|
+ border: 1px solid #efefef;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ border-radius: 6rpx;
|
|
|
}
|
|
|
- .name{
|
|
|
- float: right;
|
|
|
- line-height: 90rpx;
|
|
|
- display: inline-block;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 470rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ float: left;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 46rpx;
|
|
|
float: left;
|
|
|
font-size: $font-size-28;
|
|
|
color: $text-color;
|
|
|
float: right;
|
|
|
- padding-right: 48rpx;
|
|
|
overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .icon-chakangengduo{
|
|
|
- line-height: 90rpx;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- width: 48rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- color: #b2b2b2;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-supplier{
|
|
|
- width: 100%;
|
|
|
- height: 174rpx;
|
|
|
- padding: 30rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFFFFF;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 20rpx solid #F7F7F7;
|
|
|
- .logo{
|
|
|
- width: 128rpx;
|
|
|
- height: 92rpx;
|
|
|
- float: left;
|
|
|
- border: 1px solid #efefef;
|
|
|
- border-radius: 6rpx;
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- border-radius: 6rpx;
|
|
|
- }
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
- .main{
|
|
|
- width: 470rpx;
|
|
|
- height: 92rpx;
|
|
|
+ .massgs {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 46rpx;
|
|
|
float: left;
|
|
|
- margin-left: 20rpx;
|
|
|
- .name{
|
|
|
- width: 100%;
|
|
|
- line-height: 46rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ .label {
|
|
|
float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- float: right;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- text-align: left;
|
|
|
}
|
|
|
- .massgs{
|
|
|
- width: 100%;
|
|
|
- line-height: 46rpx;
|
|
|
+ .p-stars {
|
|
|
float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #999999;
|
|
|
- .label{
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .p-stars{
|
|
|
- float: left;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- .acount{
|
|
|
- float: right;
|
|
|
- text{
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-left: 20rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .icon-chakangengduo{
|
|
|
- line-height: 154rpx;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- width: 48rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- color: #b2b2b2;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-details {
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- border-bottom: 20rpx solid #F7F7F7;
|
|
|
- &.service{
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- &.recommend{
|
|
|
- background-color: #F7F7F7;
|
|
|
- border-bottom: none;
|
|
|
- .title{
|
|
|
- .title-tab{
|
|
|
- background-color: #F7F7F7;
|
|
|
- color: $text-color;
|
|
|
+ .acount {
|
|
|
+ float: right;
|
|
|
+ text {
|
|
|
+ color: $color-system;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .product-rich-text-none{
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- line-height: 60rpx;
|
|
|
- }
|
|
|
- .content-none{
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- }
|
|
|
- .title{
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- .title-tab{
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- background: #fff;
|
|
|
- z-index: 10;
|
|
|
- font-size: $font-size-30;
|
|
|
- text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-chakangengduo {
|
|
|
+ line-height: 154rpx;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 48rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product-details {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 20rpx solid #f7f7f7;
|
|
|
+ &.service {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ &.recommend {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-bottom: none;
|
|
|
+ .title {
|
|
|
+ .title-tab {
|
|
|
+ background-color: #f7f7f7;
|
|
|
color: $text-color;
|
|
|
- line-height: 100rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .title-msg{
|
|
|
- width: 100%;
|
|
|
- height: 236rpx;
|
|
|
- padding: 18rpx;
|
|
|
- background-color: rgba(225,86,22, 0.1);
|
|
|
- color: $color-system;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .tit{
|
|
|
- line-height: 46rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .txt{
|
|
|
- line-height: 38rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .content{
|
|
|
- width: 100%;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
}
|
|
|
- .isLower{
|
|
|
+ .product-rich-text-none {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ .content-none {
|
|
|
width: 100%;
|
|
|
- height: 116rpx;
|
|
|
- line-height: 116rpx;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- font-size: $font-size-32;
|
|
|
- font-weight: bold;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
}
|
|
|
- .bottom-btn{
|
|
|
+ .title {
|
|
|
width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background: #FFFFFF;
|
|
|
- z-index: 99;
|
|
|
- .bottom-le{
|
|
|
- width: 300rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title-tab {
|
|
|
+ width: 100%;
|
|
|
height: 100rpx;
|
|
|
- padding:10rpx 20rpx 10rpx 0;
|
|
|
- float: left;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 10;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ text-align: left;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .title-msg {
|
|
|
+ width: 100%;
|
|
|
+ height: 236rpx;
|
|
|
+ padding: 18rpx;
|
|
|
+ background-color: rgba(225, 86, 22, 0.1);
|
|
|
+ color: $color-system;
|
|
|
box-sizing: border-box;
|
|
|
- .item-bt{
|
|
|
- width: 80rpx;
|
|
|
- height: 100%;
|
|
|
- margin-right:15rpx;
|
|
|
- display: flex;
|
|
|
- float: left;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: $text-color;
|
|
|
- line-height: 34rpx;
|
|
|
- position: relative;
|
|
|
- .animation-num{
|
|
|
- font-size:$font-size-32 ;
|
|
|
- color: #FF2A2A;
|
|
|
- position: absolute;
|
|
|
- top: -12rpx;
|
|
|
- right: 4rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .animation{
|
|
|
- animation: showAmnation 2.2s ease-in-out both;
|
|
|
- }
|
|
|
- .restion{
|
|
|
- animation: hideAmnation 1s ease-in-out both;
|
|
|
- }
|
|
|
- .icon-num{
|
|
|
- position: absolute;
|
|
|
- right:-12rpx;
|
|
|
- top: -5rpx;
|
|
|
- }
|
|
|
- .icon-num.goleft{
|
|
|
- right: 2rpx;
|
|
|
- }
|
|
|
- &:last-child{
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- }
|
|
|
- button.contact-btn{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: center;
|
|
|
- text-decoration: none;
|
|
|
- line-height: 34rpx;
|
|
|
- border-radius: 0;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- overflow: hidden;
|
|
|
- color: $text-color;
|
|
|
- background-color:#FFFFFF;
|
|
|
- }
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .tit {
|
|
|
+ line-height: 46rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ line-height: 38rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ text-align: justify;
|
|
|
}
|
|
|
}
|
|
|
- .bottom-ri{
|
|
|
- width: 450rpx;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.isLower {
|
|
|
+ width: 100%;
|
|
|
+ height: 116rpx;
|
|
|
+ line-height: 116rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.bottom-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 99;
|
|
|
+ .bottom-le {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 10rpx 20rpx 10rpx 0;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .item-bt {
|
|
|
+ width: 80rpx;
|
|
|
height: 100%;
|
|
|
- float: right;
|
|
|
+ margin-right: 15rpx;
|
|
|
display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 13rpx 20rpx 13rpx 0;
|
|
|
- .btn{
|
|
|
- flex: 1;
|
|
|
- width: 200rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #FFFFFF;
|
|
|
+ float: left;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 34rpx;
|
|
|
+ position: relative;
|
|
|
+ .animation-num {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #ff2a2a;
|
|
|
+ position: absolute;
|
|
|
+ top: -12rpx;
|
|
|
+ right: 4rpx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
- .btn-cart{
|
|
|
- background-color: #ffe6dc;
|
|
|
- color: $color-system;
|
|
|
- border-radius: 42rpx 0 0 42rpx;
|
|
|
+ .animation {
|
|
|
+ animation: showAmnation 2.2s ease-in-out both;
|
|
|
+ }
|
|
|
+ .restion {
|
|
|
+ animation: hideAmnation 1s ease-in-out both;
|
|
|
+ }
|
|
|
+ .icon-num {
|
|
|
+ position: absolute;
|
|
|
+ right: -12rpx;
|
|
|
+ top: -5rpx;
|
|
|
}
|
|
|
- .btn-cart.disabled{
|
|
|
- background-color: #E1E1E1;
|
|
|
- color: #FFFFFF;
|
|
|
+ .icon-num.goleft {
|
|
|
+ right: 2rpx;
|
|
|
}
|
|
|
- .btn-bay{
|
|
|
- background:linear-gradient(to right, #f28f31 0%, #e15616 100%);
|
|
|
- border-radius: 0 42rpx 42rpx 0;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
- .btn-bay.disabled{
|
|
|
- background: linear-gradient(135deg,rgba(242,143,49,0.5) 0%,rgba(225,86,22,0.5) 100%);
|
|
|
+ image {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+ button.contact-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ line-height: 34rpx;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ color: $text-color;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .uni-badge--small {
|
|
|
- -webkit-transform: scale(.8);
|
|
|
- -ms-transform: scale(.8);
|
|
|
- transform: scale(.8);
|
|
|
- -webkit-transform-origin: center center;
|
|
|
- -ms-transform-origin: center center;
|
|
|
- transform-origin: center center;
|
|
|
- }
|
|
|
- .uni-badge {
|
|
|
- font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
+ .bottom-ri {
|
|
|
+ width: 450rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ display: flex;
|
|
|
box-sizing: border-box;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1;
|
|
|
- display: inline-block;
|
|
|
- padding: 3px 6px;
|
|
|
- color: #333;
|
|
|
- border-radius: 100px;
|
|
|
- background-color: #f1f1f1;
|
|
|
+ padding: 13rpx 20rpx 13rpx 0;
|
|
|
+ .btn {
|
|
|
+ flex: 1;
|
|
|
+ width: 200rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .btn-cart {
|
|
|
+ background-color: #ffe6dc;
|
|
|
+ color: $color-system;
|
|
|
+ border-radius: 42rpx 0 0 42rpx;
|
|
|
+ }
|
|
|
+ .btn-cart.disabled {
|
|
|
+ background-color: #e1e1e1;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .btn-bay {
|
|
|
+ background: linear-gradient(to right, #f28f31 0%, #e15616 100%);
|
|
|
+ border-radius: 0 42rpx 42rpx 0;
|
|
|
+ }
|
|
|
+ .btn-bay.disabled {
|
|
|
+ background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.uni-badge--small {
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
+ -ms-transform: scale(0.8);
|
|
|
+ transform: scale(0.8);
|
|
|
+ -webkit-transform-origin: center center;
|
|
|
+ -ms-transform-origin: center center;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
+.uni-badge {
|
|
|
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 6px;
|
|
|
+ color: #333;
|
|
|
+ border-radius: 100px;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+}
|
|
|
+.uni-badge-error {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #dd524d;
|
|
|
+}
|
|
|
+.product-topnav {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 1000;
|
|
|
+ position: fixed;
|
|
|
+ opacity: 1;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ &.fixed {
|
|
|
+ animation: showFixedColor 0.1s ease-in-out both;
|
|
|
}
|
|
|
- .uni-badge-error {
|
|
|
- color: #fff;
|
|
|
- background-color: #dd524d;
|
|
|
+ &.none {
|
|
|
+ animation: hideFixedColor 0.1s ease-in-out both;
|
|
|
}
|
|
|
- .product-topnav{
|
|
|
+ .navbar {
|
|
|
width: 100%;
|
|
|
- height: 174rpx;
|
|
|
+ height: 60rpx;
|
|
|
box-sizing: border-box;
|
|
|
- background: #FFFFFF;
|
|
|
- z-index: 1000;
|
|
|
- position: fixed;
|
|
|
- opacity: 1;
|
|
|
- left: 0;
|
|
|
- &.fixed{
|
|
|
- animation: showFixedColor 0.1s ease-in-out both;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- animation: hideFixedColor 0.1s ease-in-out both;
|
|
|
- }
|
|
|
- .navbar {
|
|
|
- width: 100%;
|
|
|
- height: 60rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ display: flex;
|
|
|
+ .nav-item {
|
|
|
display: flex;
|
|
|
- .nav-item {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 60rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .line{
|
|
|
- width: 60rpx;
|
|
|
- height: 2px;
|
|
|
- border-radius: 1px;
|
|
|
- background: #FFFFFF;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- margin-left: -30rpx;
|
|
|
- }
|
|
|
- &.current{
|
|
|
- color:$color-system;
|
|
|
- .line{
|
|
|
- background: $color-system;
|
|
|
- }
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .line {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 1px;
|
|
|
+ background: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -30rpx;
|
|
|
+ }
|
|
|
+ &.current {
|
|
|
+ color: $color-system;
|
|
|
+ .line {
|
|
|
+ background: $color-system;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .search-input{
|
|
|
+ }
|
|
|
+ .search-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 114rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .gosearch-btn {
|
|
|
width: 100%;
|
|
|
- height: 114rpx;
|
|
|
- padding:24rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- .gosearch-btn{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 40rpx;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 26rpx;
|
|
|
+ padding-left: 66rpx;
|
|
|
+ &.fixed {
|
|
|
+ background: rgba(70, 70, 70, 0.1);
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ background: rgba(70, 70, 70, 0.1);
|
|
|
+ }
|
|
|
+ .search-icon {
|
|
|
+ width: 66rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 2rpx;
|
|
|
+ text-align: center;
|
|
|
line-height: 66rpx;
|
|
|
- color: #B2B2B2;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 66rpx;
|
|
|
- &.fixed{
|
|
|
- background: rgba(70,70,70,0.1);
|
|
|
- }
|
|
|
- &.none{
|
|
|
- background: rgba(70,70,70,0.1);
|
|
|
- }
|
|
|
- .search-icon{
|
|
|
- width: 66rpx;
|
|
|
- height: 66rpx;
|
|
|
- position:absolute ;
|
|
|
- left: 0;
|
|
|
- top: 2rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 66rpx;
|
|
|
- .icon-sousuo{
|
|
|
- margin:0 6rpx;
|
|
|
- font-size: $font-size-34;
|
|
|
- color: #B2B2B2;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-text{
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 66rpx;
|
|
|
- color: #B2B2B2;
|
|
|
+ .icon-sousuo {
|
|
|
+ margin: 0 6rpx;
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: #b2b2b2;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
}
|
|
|
+ .search-text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 66rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- @keyframes showFixedColor {
|
|
|
- 0% {background: rgba(255,255,255,0);}
|
|
|
- 50% {background: rgba(255,255,255,0.5);}
|
|
|
- 100% {background: rgba(255,255,255,1);}
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes showFixedColor {
|
|
|
+ 0% {
|
|
|
+ background: rgba(255, 255, 255, 0);
|
|
|
}
|
|
|
- @keyframes hideFixedColor {
|
|
|
- 0% {background: rgba(255,255,255,1);}
|
|
|
- 50% {background: rgba(255,255,255,0.5);}
|
|
|
- 100% {background: rgba(255,255,255,0);}
|
|
|
+ 50% {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
- /* 加入购物模态层*/
|
|
|
- @keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
- @keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+}
|
|
|
+@keyframes hideFixedColor {
|
|
|
+ 0% {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
- @keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
+ 50% {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
- @keyframes hideLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ background: rgba(255, 255, 255, 0);
|
|
|
}
|
|
|
- @keyframes showAmnation {
|
|
|
- 0% {
|
|
|
- top: -12rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- top: -60rpx;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: -100rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+}
|
|
|
+/* 加入购物模态层*/
|
|
|
+@keyframes showPopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
- @keyframes hideAmnation {
|
|
|
- 0% {
|
|
|
- top: -100rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: -12rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hidePopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
}
|
|
|
- .popup {
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes showAmnation {
|
|
|
+ 0% {
|
|
|
+ top: -12rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ top: -60rpx;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: -100rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideAmnation {
|
|
|
+ 0% {
|
|
|
+ top: -100rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: -12rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.popup {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ display: none;
|
|
|
+ .mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- z-index: 999;
|
|
|
- display: none;
|
|
|
- .mask{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
+ z-index: 21;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+ .layer {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 22;
|
|
|
+ bottom: -294rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 24rpx 24rpx 36rpx 24rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: space-between;
|
|
|
+ .content {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 21;
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
}
|
|
|
- .layer {
|
|
|
- position: fixed;
|
|
|
- z-index: 22;
|
|
|
- bottom: -294rpx;
|
|
|
- width: 702rpx;
|
|
|
- padding: 24rpx 24rpx 36rpx 24rpx;
|
|
|
- height: 260rpx;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-content: space-between;
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .btn {
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .button {
|
|
|
width: 100%;
|
|
|
height: 88rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- .button {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: $btn-confirm;
|
|
|
- font-size: $font-size-28;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: $btn-confirm;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- &.show {
|
|
|
- display: block;
|
|
|
- .mask{
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ display: block;
|
|
|
+ .mask {
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
|
}
|
|
|
- &.hide {
|
|
|
- display: block;
|
|
|
- .mask{
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
- }
|
|
|
-
|
|
|
- .layer {
|
|
|
- animation: hideLayer 0.2s linear both;
|
|
|
- }
|
|
|
+ .layer {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
}
|
|
|
- &.none {
|
|
|
- display: none;
|
|
|
+ }
|
|
|
+ &.hide {
|
|
|
+ display: block;
|
|
|
+ .mask {
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
|
}
|
|
|
- &.service {
|
|
|
- .row {
|
|
|
- margin: 30upx 0;
|
|
|
- .title {
|
|
|
- font-size: 30upx;
|
|
|
- margin: 10upx 0;
|
|
|
- }
|
|
|
- .description {
|
|
|
- font-size: 28upx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.service {
|
|
|
+ .row {
|
|
|
+ margin: 30upx 0;
|
|
|
+ .title {
|
|
|
+ font-size: 30upx;
|
|
|
+ margin: 10upx 0;
|
|
|
+ }
|
|
|
+ .description {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
}
|
|
|
- .layer-smimg{
|
|
|
+ }
|
|
|
+ .layer-smimg {
|
|
|
+ width: 114rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ float: left;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ image {
|
|
|
width: 114rpx;
|
|
|
height: 114rpx;
|
|
|
- float: left;
|
|
|
border-radius: 10rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- image{
|
|
|
- width: 114rpx;
|
|
|
- height: 114rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
}
|
|
|
- .layer-nunbox{
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 536rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- .layer-nunbox-t{
|
|
|
- width: 100%;
|
|
|
- height:44rpx;
|
|
|
- position:relative;
|
|
|
+ }
|
|
|
+ .layer-nunbox {
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 536rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .layer-nunbox-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .layer-nunbox-text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ .number-box {
|
|
|
display: flex;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- .text{
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2rpx solid #ffe6dc;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .iconfont {
|
|
|
font-size: $font-size-24;
|
|
|
- line-height: 48rpx;
|
|
|
+ padding: 0 18rpx;
|
|
|
color: #999999;
|
|
|
- }
|
|
|
- .layer-nunbox-text{
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- .number-box{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border:2rpx solid #ffe6dc;
|
|
|
- border-radius: 30rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- .iconfont{
|
|
|
- font-size: $font-size-24;
|
|
|
- padding:0 18rpx;
|
|
|
- color: #999999;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- background: #fef6f3;
|
|
|
- &.icon-jianhao{
|
|
|
- border-radius: 30rpx 0 0 30rpx;
|
|
|
- }
|
|
|
- &.icon-jiahao{
|
|
|
- border-radius: 0 30rpx 30rpx 0;
|
|
|
- }
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #fef6f3;
|
|
|
+ &.icon-jianhao {
|
|
|
+ border-radius: 30rpx 0 0 30rpx;
|
|
|
}
|
|
|
- .btn-input{
|
|
|
- width: 62rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
+ &.icon-jiahao {
|
|
|
+ border-radius: 0 30rpx 30rpx 0;
|
|
|
}
|
|
|
}
|
|
|
- .product-step{
|
|
|
- position: absolute;
|
|
|
- left: 45rpx;
|
|
|
- bottom: 0;
|
|
|
- height: 44rpx;
|
|
|
- background: #FFFFFF;
|
|
|
+ .btn-input {
|
|
|
+ width: 62rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
}
|
|
|
}
|
|
|
- .layer-nunbox-b{
|
|
|
- width: 100%;
|
|
|
- height:44rpx;
|
|
|
- margin-top: 13rpx;
|
|
|
- }
|
|
|
- .text{
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- .p{
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
- .p:first-child{
|
|
|
- margin-left: 30rpx;
|
|
|
- }
|
|
|
- .p.sm{
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
+ .product-step {
|
|
|
+ position: absolute;
|
|
|
+ left: 45rpx;
|
|
|
+ bottom: 0;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .tui-popup-box {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- min-height: 220rpx;
|
|
|
- padding:0rpx 24rpx 0 24rpx;
|
|
|
- .title{
|
|
|
- font-size: $font-size-34;
|
|
|
- color: $text-color;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
+ .layer-nunbox-b {
|
|
|
width: 100%;
|
|
|
- height: 88rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ margin-top: 13rpx;
|
|
|
}
|
|
|
- .tui-popup-main{
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- .tui-popup-scroll{
|
|
|
- width: 100%;
|
|
|
- height: 500rpx;
|
|
|
- .content-tr{
|
|
|
- width: 100%;
|
|
|
- min-height: 58rpx;
|
|
|
- line-height: 58rpx;
|
|
|
- display: flex;
|
|
|
- .content-td{
|
|
|
- display: flex;
|
|
|
- flex: 3;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .content-th{
|
|
|
- display: flex;
|
|
|
- flex: 7;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: left;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ .p {
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ .p:first-child {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .p.sm {
|
|
|
+ font-size: $font-size-24;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .tui-popup-btn {
|
|
|
+}
|
|
|
+.tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 220rpx;
|
|
|
+ padding: 0rpx 24rpx 0 24rpx;
|
|
|
+ .title {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ }
|
|
|
+ .tui-popup-main {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
float: left;
|
|
|
- margin-top: 24rpx;
|
|
|
- .tui-button{
|
|
|
+ .tui-popup-scroll {
|
|
|
width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: $font-size-28;
|
|
|
- border-radius: 44rpx;
|
|
|
+ height: 500rpx;
|
|
|
+ .content-tr {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 58rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ display: flex;
|
|
|
+ .content-td {
|
|
|
+ display: flex;
|
|
|
+ flex: 3;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .content-th {
|
|
|
+ display: flex;
|
|
|
+ flex: 7;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- /*富文本样式*/
|
|
|
- rich-text.p{
|
|
|
- width: 702rpx !important;
|
|
|
- padding: 0 24rpx;
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
- rich-text.img{
|
|
|
+}
|
|
|
+.tui-popup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .tui-button {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
+ height: 88rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
}
|
|
|
+}
|
|
|
+/*富文本样式*/
|
|
|
+rich-text.p {
|
|
|
+ width: 702rpx !important;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ text-align: justify;
|
|
|
+}
|
|
|
+rich-text.img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
</style>
|
