|
|
@@ -1,1788 +0,0 @@
|
|
|
-<template>
|
|
|
- <view
|
|
|
- class="product"
|
|
|
- :style="{
|
|
|
- paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
|
|
|
- paddingTop: CustomBar + 'px'
|
|
|
- }"
|
|
|
- >
|
|
|
- <header-product
|
|
|
- v-if="isHeaderPoduct"
|
|
|
- :systeminfo="systeminfo"
|
|
|
- :navbar-data="nvabarData"
|
|
|
- :headerBtnPosi="headerBtnPosi"
|
|
|
- :headerColor="headerColor"
|
|
|
- :type="isShareType"
|
|
|
- :page="backPage"
|
|
|
- >
|
|
|
- </header-product>
|
|
|
- <view class="product-topnav" v-if="isNavbarFiexd" :class="navbarFiexd" :style="{ top: CustomBar + 'px' }">
|
|
|
- <view class="navbar">
|
|
|
- <view
|
|
|
- class="nav-item tui-skeleton-fillet"
|
|
|
- :class="{ current: tabCurrentIndex === 0 }"
|
|
|
- @click="tabClick(0)"
|
|
|
- >
|
|
|
- <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>
|
|
|
- </view>
|
|
|
- <tui-skeleton
|
|
|
- v-if="skeletonShow"
|
|
|
- backgroundColor="#fafafa"
|
|
|
- borderRadius="10rpx"
|
|
|
- :isLoading="true"
|
|
|
- :loadingType="2"
|
|
|
- ></tui-skeleton>
|
|
|
- <template v-else>
|
|
|
- <view class="container-product tui-skeleton">
|
|
|
- <view class="container-product-main product-details product-details0">
|
|
|
- <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">
|
|
|
- <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>
|
|
|
- </view>
|
|
|
- </uni-swiper-dot>
|
|
|
- </view>
|
|
|
- <view class="product-wrap clearfix">
|
|
|
- <view class="wrap-top">
|
|
|
- <view class="wrap-top-price">
|
|
|
- <cm-price
|
|
|
- v-if="isRequest"
|
|
|
- :product="product"
|
|
|
- :userIdentity="userIdentity"
|
|
|
- :promotions="product.promotions"
|
|
|
- :ladderList="ladderList"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="p-title tui-skeleton-fillet">
|
|
|
- <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-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="iconfont icon-wuyoushouhou tui-skeleton-rect"
|
|
|
- ><text class="text">无忧退货</text></text
|
|
|
- >
|
|
|
- <text class="iconfont icon-wuyoushouhou tui-skeleton-rect"
|
|
|
- ><text class="text">快速退款</text></text
|
|
|
- >
|
|
|
- <text class="iconfont icon-wuyoushouhou tui-skeleton-rect"
|
|
|
- ><text class="text">正品保证</text></text
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-parameter" @click="showPopup">
|
|
|
- <text class="title">参数：</text> <text class="name">品牌 分类...</text>
|
|
|
- <text class="iconfont icon-chakangengduo"></text>
|
|
|
- </view>
|
|
|
- <!-- 优惠券 TODO -->
|
|
|
- <view class="product-coupon" @click="couponVisible = true" v-if="couponList.length > 0">
|
|
|
- <view class="title">优惠券：</view>
|
|
|
- <view class="coupon-tags">
|
|
|
- <text class="tag" v-for="(tagName, index) in couponTags" :key="index">{{ tagName }}</text>
|
|
|
- </view>
|
|
|
- <text class="iconfont icon-chakangengduo"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-details product-details1">
|
|
|
- <!-- 商品详情 -->
|
|
|
- <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="product.productDetail.detailInfo"></parser>
|
|
|
- <view class="product-rich-text-none" v-else>暂无商品信息</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-details service product-details2">
|
|
|
- <!-- 服务项目 -->
|
|
|
- <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>
|
|
|
- <!-- 商品参数 -->
|
|
|
- <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">
|
|
|
- <view class="content-tr">
|
|
|
- <view class="content-td">品牌</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.unit }}</view>
|
|
|
- </view>
|
|
|
- <view class="content-tr">
|
|
|
- <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>
|
|
|
- </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">
|
|
|
- <view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
- <!-- 已下架商品提示 -->
|
|
|
- <view
|
|
|
- class="product-invalid"
|
|
|
- v-if="isShowButton"
|
|
|
- :style="{ bottom: isIphoneX ? '168rpx' : '100rpx' }"
|
|
|
- >
|
|
|
- <text>商品已经下架啦，非常抱歉！</text>
|
|
|
- </view>
|
|
|
- <view class="bottom-le">
|
|
|
- <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/index/index')">
|
|
|
- <text class="iconfont icon-fanhuishouye"></text> <text>首页</text>
|
|
|
- </view>
|
|
|
- <button class="item-bt" open-type="contact" @bindcontact="handleContact">
|
|
|
- <text class="iconfont icon-kefu"></text> <text>客服</text>
|
|
|
- </button>
|
|
|
- <view class="item-bt" @click="buyProductCart()">
|
|
|
- <text class="iconfont icon-gouwuche"></text> <text>购物车</text>
|
|
|
- <text
|
|
|
- v-if="hasLogin && kindCount > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[kindCount < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ kindCount >= 100 ? '99+' : kindCount }}
|
|
|
- </text>
|
|
|
- <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottom-ri">
|
|
|
- <button
|
|
|
- :disabled="isShowButton"
|
|
|
- class="btn btn-cart"
|
|
|
- :class="[isShowButton ? 'disabled' : '']"
|
|
|
- @tap.stop="btnGetConfirm('add')"
|
|
|
- >
|
|
|
- 加入购物车
|
|
|
- </button>
|
|
|
- <button
|
|
|
- :disabled="isShowButton"
|
|
|
- class="btn btn-bay"
|
|
|
- :class="[isShowButton ? '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">
|
|
|
- <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" @click="changeCountAdd()"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="layer-nunbox-b">
|
|
|
- <view class="text"
|
|
|
- >单价: <text class="p sm">￥</text>
|
|
|
- <text class="p bg">{{ buyRetailPrice | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 侧边 -->
|
|
|
- <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <!-- 优惠券列表 TODO-->
|
|
|
- <cm-coupon-list
|
|
|
- title="获取优惠券"
|
|
|
- listType="receive"
|
|
|
- :couponList="couponList"
|
|
|
- :visible="couponVisible"
|
|
|
- :showStatus="true"
|
|
|
- @close="closeCouponList"
|
|
|
- @couponClick="couponClick"
|
|
|
- ></cm-coupon-list>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { mapGetters, mapActions, mapMutations } from 'vuex'
|
|
|
-import HeaderProduct 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 cmService from '@/components/cm-module/productDetails/cm-service' //服务项目
|
|
|
-import CmCouponList from '@/components/cm-module/cm-coupon-list/cm-coupon-list'
|
|
|
-import authorize from '@/common/authorize.js'
|
|
|
-import wxLogin from '@/services/wxLogin.js'
|
|
|
-import { debounce } from '@/common/common.js'
|
|
|
-var isPreviewImg
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- HeaderProduct,
|
|
|
- parser,
|
|
|
- cmPrice,
|
|
|
- cmAttributes,
|
|
|
- cmService,
|
|
|
- CmCouponList
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- nvabarData: {
|
|
|
- //顶部自定义导航
|
|
|
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
|
|
|
- title: '' // 导航栏 中间的标题
|
|
|
- },
|
|
|
- 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,
|
|
|
- isShareType: '',
|
|
|
- isHeaderPoduct: false,
|
|
|
- isNavbarFiexd: false,
|
|
|
- navbarFiexd: 'none',
|
|
|
- ladderPriceFlag: '',
|
|
|
- ladderList: '',
|
|
|
- isEvaluate: false,
|
|
|
- isAnimation: false,
|
|
|
- skeletonShow: true,
|
|
|
- isQuantity: false,
|
|
|
- disabled: false,
|
|
|
- tabCurrentIndex: 0,
|
|
|
- productId: 0,
|
|
|
- goodsData: {}, //自定义数据
|
|
|
- product: {}, //采美
|
|
|
- productImage: [],
|
|
|
- retailPrice: 0,
|
|
|
- buyRetailPrice: 0,
|
|
|
- stock: 0,
|
|
|
- number: 1,
|
|
|
- productsList: [],
|
|
|
- goodListData: [],
|
|
|
- headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
- systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
- windowHeight: '',
|
|
|
- headerColor: false,
|
|
|
- backPage: 1,
|
|
|
- linkPath: '',
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- popupShow: false, //参数弹窗
|
|
|
- tabSelectFlag: false,
|
|
|
- sectionPropsArr: [],
|
|
|
- scrollTopArray: [],
|
|
|
- sectionTopRangeArr: [],
|
|
|
- winHeight: '',
|
|
|
- isShowButton: false,
|
|
|
- couponVisible: false,
|
|
|
- couponList: []
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.productId = option.productId //获取商品ID
|
|
|
- this.isShareType = option.type
|
|
|
- this.linkPath = option.path
|
|
|
- this.isHeaderPoduct = true
|
|
|
- if (this.isShareType == 'share') {
|
|
|
- // 收集分享信息
|
|
|
- this.setInviteUserId(option.inviteUserId)
|
|
|
- }
|
|
|
- if (option.page == 2) {
|
|
|
- this.backPage = option.page
|
|
|
- }
|
|
|
- this.getWinHeight()
|
|
|
- this.getCouponByProduct()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['hasLogin', 'isIphoneX', 'kindCount', 'userIdentity', 'userId']),
|
|
|
- // 优惠券标签
|
|
|
- couponTags() {
|
|
|
- const result = []
|
|
|
- for (let i = 0; i < this.couponList.length; i++) {
|
|
|
- if (i >= 3) return result
|
|
|
- if (this.couponList[i].noThresholdFlag === 1) {
|
|
|
- result.push(`减${this.couponList[i].couponAmount}`)
|
|
|
- } else {
|
|
|
- result.push(`满${this.couponList[i].touchPrice}减${this.couponList[i].couponAmount}`)
|
|
|
- }
|
|
|
- }
|
|
|
- return result
|
|
|
- }
|
|
|
- },
|
|
|
- filters: {
|
|
|
- NumFormat(value) {
|
|
|
- //处理金额
|
|
|
- // console.log('===' + Number(value).toFixed(2))
|
|
|
- return Number(value).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapActions('cart', ['addToCart', 'getCartNumber']),
|
|
|
- ...mapMutations('user', ['setInviteUserId']),
|
|
|
- // 关闭优惠券列表
|
|
|
- closeCouponList() {
|
|
|
- this.couponVisible = false
|
|
|
- },
|
|
|
- // 初始化商品详情查询
|
|
|
- initData() {
|
|
|
- this.ProductService.QueryProductDetils({
|
|
|
- productId: this.productId,
|
|
|
- userId: this.userId
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.skeletonShow = false
|
|
|
- this.productImage = []
|
|
|
- this.product = response.data
|
|
|
- //已删除/已冻结
|
|
|
- if (this.product.validFlag === 2) {
|
|
|
- this.isShowButton = true
|
|
|
- }
|
|
|
- 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.product.imageList.forEach(item => {
|
|
|
- this.productImage.push(item)
|
|
|
- })
|
|
|
- //处理阶梯价格
|
|
|
- if (this.product.ladderList && this.product.ladderList.length > 0) {
|
|
|
- this.ladderList = this.product.ladderList
|
|
|
- }
|
|
|
- this.retailPrice = this.product.price.toFixed(2)
|
|
|
- this.buyRetailPrice = this.product.price
|
|
|
- setTimeout(() => {
|
|
|
- this.getSectionProps()
|
|
|
- }, 2000)
|
|
|
- console.log(this.userId)
|
|
|
- if (this.userId > 0) {
|
|
|
- this.getCartNumber()
|
|
|
- }
|
|
|
- this.isRequest = true
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取当前商品可用优惠券列表
|
|
|
- getCouponByProduct() {
|
|
|
- this.CouponService.GetCouponByProduct({
|
|
|
- productId: this.productId,
|
|
|
- userId: this.userId
|
|
|
- }).then(res => {
|
|
|
- this.couponList = res.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 优惠券列表按钮点击事件
|
|
|
- couponClick() {
|
|
|
- this.couponVisible = false
|
|
|
- },
|
|
|
- //顶部商品图片切换
|
|
|
- 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: ''
|
|
|
- })
|
|
|
- },
|
|
|
- //商品详情&&供应商信息tab切换
|
|
|
- tabClick(index) {
|
|
|
- this.tabSelectFlag = true
|
|
|
- this.tabCurrentIndex = index
|
|
|
- let classIndex = '.product-details' + index
|
|
|
- uni.createSelectorQuery()
|
|
|
- .select('.container-product')
|
|
|
- .boundingClientRect(data => {
|
|
|
- //最外层盒子节点
|
|
|
- uni.createSelectorQuery()
|
|
|
- .select(classIndex)
|
|
|
- .boundingClientRect(res => {
|
|
|
- //最外层盒子节点
|
|
|
- uni.pageScrollTo({
|
|
|
- duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
- scrollTop: res.top - data.top - 40 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- this.tabSelectFlag = false
|
|
|
- }, 500)
|
|
|
- })
|
|
|
- .exec()
|
|
|
- })
|
|
|
- .exec()
|
|
|
- },
|
|
|
- handleContact(e) {
|
|
|
- //跳转小程序客服
|
|
|
- },
|
|
|
- //底部购物车按钮点击
|
|
|
- buyProductCart() {
|
|
|
- if (this.hasLogin) {
|
|
|
- this.$api.navigateTo('/pages/goods/cart')
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login')
|
|
|
- }
|
|
|
- },
|
|
|
- //加入购物车&&立即购买点击
|
|
|
- btnGetConfirm(type) {
|
|
|
- if (this.hasLogin) {
|
|
|
- this.showSpec(type)
|
|
|
- } else {
|
|
|
- this.$api.navigateTo('/pages/login/login')
|
|
|
- }
|
|
|
- },
|
|
|
- //popup弹窗数量增加按钮
|
|
|
- changeCountAdd() {
|
|
|
- this.number++
|
|
|
- this.processActivityPrice()
|
|
|
- },
|
|
|
- //popup弹窗数量减按钮
|
|
|
- changeCountSub() {
|
|
|
- if (this.number == 1) {
|
|
|
- this.isQuantity = true
|
|
|
- this.$util.msg('购买数量不能低于1', 2000)
|
|
|
- return
|
|
|
- } else {
|
|
|
- this.number--
|
|
|
- this.processActivityPrice()
|
|
|
- this.isQuantity = false
|
|
|
- }
|
|
|
- },
|
|
|
- // 设置购买数量
|
|
|
- changeNumber(e) {
|
|
|
- let _value = e.detail.value
|
|
|
- if (!this.$api.isNumber(_value)) {
|
|
|
- this.number = 1
|
|
|
- } else if (_value == 1) {
|
|
|
- this.$util.msg('购买数量不能低于1', 2000)
|
|
|
- this.number = 1
|
|
|
- } 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.ladderList.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.addToCart({
|
|
|
- productId: this.productId,
|
|
|
- productCount: this.number
|
|
|
- })
|
|
|
- this.specClass = 'hide'
|
|
|
- } 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)
|
|
|
- },
|
|
|
- // 获得胶囊按钮位置信息
|
|
|
- setHeaderBtnPosi() {
|
|
|
- let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
- return headerBtnPosi
|
|
|
- },
|
|
|
- // 获取设备信息
|
|
|
- setSysteminfo() {
|
|
|
- let systeminfo
|
|
|
- uni.getSystemInfo({
|
|
|
- // 获取设备信息
|
|
|
- success: res => {
|
|
|
- systeminfo = res
|
|
|
- }
|
|
|
- })
|
|
|
- return systeminfo
|
|
|
- },
|
|
|
- discard() {
|
|
|
- //丢弃
|
|
|
- },
|
|
|
- onShare(res) {
|
|
|
- //分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&productId=${this.productId}&inviteUserId=${this.userId}`,
|
|
|
- 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')
|
|
|
- .boundingClientRect(data => {
|
|
|
- //最外层盒子节点
|
|
|
- uni.createSelectorQuery()
|
|
|
- .selectAll(className)
|
|
|
- .boundingClientRect(res => {
|
|
|
- //最外层盒子节点
|
|
|
- res.forEach((item, index) => {
|
|
|
- sectionPropsArr.push({
|
|
|
- className: `${className}${index}`,
|
|
|
- scrollTop: item.top - data.top,
|
|
|
- height: item.height
|
|
|
- })
|
|
|
- })
|
|
|
- this.sectionPropsArr = sectionPropsArr
|
|
|
- this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr)
|
|
|
- })
|
|
|
- .exec()
|
|
|
- })
|
|
|
- .exec()
|
|
|
- },
|
|
|
- getSectionRange(arr) {
|
|
|
- // 获取每个tab对应区域的区间
|
|
|
- let sectionScrollTopList = []
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- sectionScrollTopList.push(`${arr[i].scrollTop}-${arr[i].scrollTop + arr[i].height}`)
|
|
|
- }
|
|
|
- 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
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- //分享转发
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&productId=${this.productId}&inviteUserId=${this.userId}`,
|
|
|
- imageUrl: `${this.productImage[0]}`
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- if (isPreviewImg) {
|
|
|
- isPreviewImg = false
|
|
|
- return
|
|
|
- } else {
|
|
|
- this.initData()
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background-color: #ffffff;
|
|
|
-}
|
|
|
-.banner-section {
|
|
|
- width: 100%;
|
|
|
- height: 750rpx;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.banner {
|
|
|
- width: 100%;
|
|
|
- height: 750rpx;
|
|
|
- .product-img {
|
|
|
- width: 750rpx;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.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;
|
|
|
- .wrap-top {
|
|
|
- width: 702rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- border-bottom: 1px solid #f8f8f8;
|
|
|
- .p-title {
|
|
|
- width: 100%;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- .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: #ff457b;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .p-no {
|
|
|
- float: left;
|
|
|
- margin-right: 5rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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: #fff3f7;
|
|
|
- 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;
|
|
|
- float: left;
|
|
|
- color: $color-system;
|
|
|
- font-weight: bold;
|
|
|
- .txt {
|
|
|
- margin: 0 2rpx;
|
|
|
- }
|
|
|
- .txt.sm {
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- .txt.big {
|
|
|
- font-size: $font-size-34;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-act {
|
|
|
- // width: 80rpx;
|
|
|
- height: 34rpx;
|
|
|
- margin-top: 15rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- float: left;
|
|
|
- .tag {
|
|
|
- display: inline-block;
|
|
|
- height: 32rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- text-align: center;
|
|
|
- color: #f83c6c;
|
|
|
- float: left;
|
|
|
- margin-right: 10rpx;
|
|
|
- &.tag-02 {
|
|
|
- width: 80rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
|
|
|
- no-repeat;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- &.tag-01 {
|
|
|
- width: 56rpx;
|
|
|
- color: #fff;
|
|
|
- background-color: #f83c6c;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-btn {
|
|
|
- float: left;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .info-viewB {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .info-f {
|
|
|
- width: 50%;
|
|
|
- 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: $color-system;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #999999;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-// 选择优惠券
|
|
|
-.product-coupon {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding-left: 24rpx;
|
|
|
- padding-right: 16rpx;
|
|
|
- height: 90rpx;
|
|
|
- color: #ff457b;
|
|
|
- .title {
|
|
|
- width: auto !important;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
- .coupon-tags {
|
|
|
- flex: 1;
|
|
|
- margin-right: 24rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- .tag {
|
|
|
- height: 32rpx;
|
|
|
- padding: 2rpx 8rpx;
|
|
|
- background: #fff3f7;
|
|
|
- border: 1rpx solid #ff457b;
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ff457b;
|
|
|
- margin-left: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.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-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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- 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 {
|
|
|
- width: 100%;
|
|
|
- height: 116rpx;
|
|
|
- line-height: 116rpx;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- font-size: $font-size-32;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-.product-invalid {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- background-color: #666666;
|
|
|
- text-align: center;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #ffffff;
|
|
|
- position: fixed;
|
|
|
- bottom: 180rpx;
|
|
|
- left: 0;
|
|
|
-}
|
|
|
-.bottom-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background: #ffffff;
|
|
|
- z-index: 990;
|
|
|
- .bottom-le {
|
|
|
- width: 300rpx;
|
|
|
- height: 100rpx;
|
|
|
- padding: 10rpx 20rpx 10rpx 0;
|
|
|
- float: left;
|
|
|
- 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: #666666;
|
|
|
- line-height: 34rpx;
|
|
|
- position: relative;
|
|
|
- .iconfont {
|
|
|
- display: block;
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 34rpx;
|
|
|
- }
|
|
|
- .animation-num {
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #ff457b;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom-ri {
|
|
|
- width: 450rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- 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;
|
|
|
- }
|
|
|
- .btn-cart {
|
|
|
- background-color: #ffeff4;
|
|
|
- color: $color-system;
|
|
|
- border-radius: 42rpx 0 0 42rpx;
|
|
|
- }
|
|
|
- .btn-cart.disabled {
|
|
|
- background-color: #ffeff4;
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
- .btn-bay {
|
|
|
- background: $btn-confirm;
|
|
|
- border-radius: 0 42rpx 42rpx 0;
|
|
|
- }
|
|
|
- .btn-bay.disabled {
|
|
|
- background: $btn-confirm;
|
|
|
- color: ffffff;
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.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: 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;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@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 hideFixedColor {
|
|
|
- 0% {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- background: rgba(255, 255, 255, 0);
|
|
|
- }
|
|
|
-}
|
|
|
-/* 加入购物模态层*/
|
|
|
-@keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 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: 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 {
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.show {
|
|
|
- display: block;
|
|
|
- .mask {
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- display: block;
|
|
|
- .mask {
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
- }
|
|
|
-
|
|
|
- .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 {
|
|
|
- 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;
|
|
|
- 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;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border: 2rpx solid #e1e1e1;
|
|
|
- border-radius: 30rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-24;
|
|
|
- padding: 0 14rpx;
|
|
|
- color: #666666;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- background: #ffffff;
|
|
|
- &.icon-jianhao {
|
|
|
- border-radius: 30rpx 0 0 30rpx;
|
|
|
- }
|
|
|
- &.icon-jiahao {
|
|
|
- border-radius: 0 30rpx 30rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-input {
|
|
|
- width: 56rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #333333;
|
|
|
- background-color: #f7f7f7;
|
|
|
- }
|
|
|
- }
|
|
|
- .product-step {
|
|
|
- position: absolute;
|
|
|
- left: 45rpx;
|
|
|
- bottom: 0;
|
|
|
- height: 44rpx;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .layer-nunbox-b {
|
|
|
- width: 100%;
|
|
|
- height: 44rpx;
|
|
|
- margin-top: 30rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- .p {
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
- .p:first-child {
|
|
|
- margin-left: 30rpx;
|
|
|
- }
|
|
|
- .p.sm {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.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%;
|
|
|
- float: left;
|
|
|
- .tui-popup-scroll {
|
|
|
- width: 100%;
|
|
|
- height: 320rpx;
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-popup-btn {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- margin-top: 24rpx;
|
|
|
- .tui-button {
|
|
|
- width: 100%;
|
|
|
- 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>
|
喻文俊