|
@@ -3,10 +3,18 @@
|
|
|
<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)">
|
|
|
+ <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)">
|
|
|
+ <view
|
|
|
+ class="nav-item tui-skeleton-fillet"
|
|
|
+ :class="{ current: tabCurrentIndex === 1 }"
|
|
|
+ @click="tabClick(1)"
|
|
|
+ >
|
|
|
<text>详情</text> <text class="line"></text>
|
|
|
</view>
|
|
|
<view
|
|
@@ -19,13 +27,24 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5"></tui-skeleton>
|
|
|
+ <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">
|
|
|
- <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
|
|
|
- <text class="error-text">商品已失效,去商城逛逛别的吧~</text> <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
+ <image
|
|
|
+ class="empty-container-image"
|
|
|
+ :src="productNoneImage"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ <text class="error-text">商品已失效,去商城逛逛别的吧~</text>
|
|
|
+ <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="container-product tui-skeleton" v-else>
|
|
@@ -34,14 +53,39 @@
|
|
|
<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" />
|
|
|
+ <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
|
|
|
+ <tui-tag
|
|
|
+ padding="12rpx 24rpx"
|
|
|
+ type="translucent"
|
|
|
+ shape="circleLeft"
|
|
|
+ size="32rpx"
|
|
|
+ :scaleMultiple="0.82"
|
|
|
+ originRight
|
|
|
>{{ current + 1 }}/{{ productImage.length }}</tui-tag
|
|
|
>
|
|
|
</view>
|
|
@@ -62,29 +106,57 @@
|
|
|
</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' : ''">
|
|
|
+ <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>
|
|
|
<!-- 分享 -->
|
|
|
- <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
|
|
|
+ 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>
|
|
|
<!-- 产品标签 -->
|
|
|
<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
|
|
|
+ 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>
|
|
|
+ <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">
|
|
|
+ <view
|
|
|
+ class="productRemarks"
|
|
|
+ v-if="
|
|
|
+ product.productRemarks != '' && product.productRemarks != null
|
|
|
+ "
|
|
|
+ >
|
|
|
备注:{{ product.productRemarks }}
|
|
|
</view>
|
|
|
</view>
|
|
@@ -92,11 +164,19 @@
|
|
|
<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 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
|
|
|
+ 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>
|
|
|
</view>
|
|
@@ -105,7 +185,11 @@
|
|
|
<!-- 商品详情 -->
|
|
|
<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>
|
|
|
+ <parser
|
|
|
+ :html="html"
|
|
|
+ :img-mode="widthFix"
|
|
|
+ v-if="!goodsData.isNoneDisabled"
|
|
|
+ ></parser>
|
|
|
<view class="product-rich-text-none" v-else>暂无商品信息</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -113,7 +197,10 @@
|
|
|
<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">
|
|
|
+ <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>
|
|
@@ -125,32 +212,51 @@
|
|
|
<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.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
|
|
|
+ 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>
|
|
@@ -282,9 +388,7 @@ export default {
|
|
|
initData() {
|
|
|
// 初始化商品详情查询
|
|
|
this.ProductService.queryProductDetils({
|
|
|
- userId: this.userID,
|
|
|
- productID: this.productID,
|
|
|
- identity: this.identity
|
|
|
+ productId: this.productID
|
|
|
})
|
|
|
.then(response => {
|
|
|
this.skeletonShow = false
|
|
@@ -297,7 +401,10 @@ export default {
|
|
|
this.isInvalid = true
|
|
|
}
|
|
|
this.ladderPriceFlag = this.product.ladderPriceFlag
|
|
|
- this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
|
|
|
+ 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
|
|
@@ -318,7 +425,11 @@ export default {
|
|
|
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 {
|
|
@@ -401,7 +512,10 @@ export default {
|
|
|
},
|
|
|
processActivityPrice() {
|
|
|
//单独处理活动价格和阶梯价格
|
|
|
- if ((this.ladderPriceFlag == '0' && this.product.actStatus == 0) || this.product.actStatus == 1) {
|
|
|
+ if (
|
|
|
+ (this.ladderPriceFlag == '0' && this.product.actStatus == 0) ||
|
|
|
+ this.product.actStatus == 1
|
|
|
+ ) {
|
|
|
this.buyRetailPrice = this.product.retailPrice
|
|
|
} else {
|
|
|
this.ladderPriceList.forEach((item, index) => {
|
|
@@ -564,7 +678,9 @@ export default {
|
|
|
if (i == 0) {
|
|
|
sectionScrollTopList.push(`0-${thisScrollTop}`)
|
|
|
} else if (i == arr.length - 1) {
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`)
|
|
|
+ sectionScrollTopList.push(
|
|
|
+ `${thisScrollTop}-${nextScrollTop - this.winHeight}`
|
|
|
+ )
|
|
|
} else {
|
|
|
sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`)
|
|
|
}
|
|
@@ -1333,7 +1449,11 @@ page {
|
|
|
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%);
|
|
|
+ background: linear-gradient(
|
|
|
+ 135deg,
|
|
|
+ rgba(242, 143, 49, 0.5) 0%,
|
|
|
+ rgba(225, 86, 22, 0.5) 100%
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
}
|