|
|
@@ -34,111 +34,110 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
- <view class="container-product tui-skeleton">
|
|
|
- <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 product.imageList" :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 }}/{{ product.imageList.length }}</tui-tag>
|
|
|
- </view>
|
|
|
- </uni-swiper-dot>
|
|
|
- </view>
|
|
|
- <view class="product-wrap clearfix">
|
|
|
- <view class="wrap-top" >
|
|
|
- <view class="wrap-top-price">
|
|
|
- <second-price :product="product"></second-price>
|
|
|
- </view>
|
|
|
- <view class="p-title tui-skeleton-fillet">
|
|
|
- <view class="p-title-name">
|
|
|
- {{product.name == undefined ? '' : product.name}}
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="container-product tui-skeleton" v-else>
|
|
|
+ <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 product.imageList" :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 }}/{{ product.imageList.length }}</tui-tag>
|
|
|
</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>
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
|
- <text class="text">{{product.productRemarks}}</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>
|
|
|
+ </uni-swiper-dot>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="product-seve" v-if="hasLogin">
|
|
|
- <text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">无忧退货</text></text>
|
|
|
- <text class="iconfont icon-wuyoutuihuoi tui-skeleton-rect"><text class="text">快速退款</text></text>
|
|
|
- <text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">正品保证</text></text>
|
|
|
+ <view class="product-wrap clearfix">
|
|
|
+ <view class="wrap-top" >
|
|
|
+ <view class="wrap-top-price">
|
|
|
+ <second-price :product="product"></second-price>
|
|
|
+ </view>
|
|
|
+ <view class="p-title tui-skeleton-fillet">
|
|
|
+ <view class="p-title-name">{{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>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
|
|
|
+ <text class="text">{{product.productRemarks}}</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" v-if="hasLogin">
|
|
|
+ <text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">无忧退货</text></text>
|
|
|
+ <text class="iconfont icon-wuyoutuihuoi tui-skeleton-rect"><text class="text">快速退款</text></text>
|
|
|
+ <text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">正品保证</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-parameter" @click="showPopup">
|
|
|
+ <text class="title">参数：</text>
|
|
|
+ <text class="name">品牌 参数 分类...</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="product-parameter" @click="showPopup">
|
|
|
- <text class="title">参数：</text>
|
|
|
- <text class="name">品牌 参数 分类...</text>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-details productDetails0">
|
|
|
- <!-- 商品详情 -->
|
|
|
- <view class="title">
|
|
|
- <view class="title-tab">商品详情</view>
|
|
|
- </view>
|
|
|
- <view class="Disclaimer" v-if="hasLogin">
|
|
|
- <span >免责声明</span>
|
|
|
- <text class="text">
|
|
|
- 鉴于本商城提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本商城对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
- <view class="contentHtml">
|
|
|
- <view class="detailsText" v-if="product.productDetails!=''||product.productDetails!=null" >{{product.productDetails}}</view>
|
|
|
- <view class="imgList" v-for="(item, index) in product.imageList" :key="index" :data-src="item">
|
|
|
- <img :src="item"/>
|
|
|
- </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-details secondBrand productDetails1" v-if="product.brandInfo!=''&&product.brandInfo!=null">
|
|
|
- <!-- 品牌信息 -->
|
|
|
- <view class="title">
|
|
|
- <view class="title-tab">品牌信息</view>
|
|
|
- </view>
|
|
|
- <text class="brandinfo">
|
|
|
- {{product.brandInfo}}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="product-details recommend productDetails2">
|
|
|
- <!-- 相关推荐 -->
|
|
|
- <view class="title">
|
|
|
- <view class="title-tab">相关推荐</view>
|
|
|
- </view>
|
|
|
- <view class="content hot">
|
|
|
- <recommend :query-productid="product.productID" v-if="isRequest" ></recommend>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 商品参数 -->
|
|
|
- <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
|
- <view class="tui-popup-box clearfix">
|
|
|
- <view class="title">商品参数</view>
|
|
|
- <cm-parameter :product="product" :goodsData="goodsData" ></cm-parameter>
|
|
|
- <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="product-details productDetails0">
|
|
|
+ <!-- 商品详情 -->
|
|
|
+ <view class="title">
|
|
|
+ <view class="title-tab">商品详情</view>
|
|
|
+ </view>
|
|
|
+ <view class="Disclaimer" v-if="hasLogin">
|
|
|
+ <span >免责声明</span>
|
|
|
+ <text class="text">
|
|
|
+ 鉴于本商城提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本商城对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
+ <view class="contentHtml">
|
|
|
+ <view class="detailsText" v-if="product.productDetails!=''||product.productDetails!=null" >{{product.productDetails}}</view>
|
|
|
+ <view class="imgList" v-for="(item, index) in product.imageList" :key="index" :data-src="item">
|
|
|
+ <img :src="item"/>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </tui-bottom-popup>
|
|
|
- <!-- 侧边 -->
|
|
|
- <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
|
|
|
+ <view class="product-details secondBrand productDetails1" v-if="product.brandInfo!=''&&product.brandInfo!=null">
|
|
|
+ <!-- 品牌信息 -->
|
|
|
+ <view class="title"><view class="title-tab">品牌信息</view></view>
|
|
|
+ <text class="brandinfo">{{product.brandInfo}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="product-details recommend productDetails2">
|
|
|
+ <!-- 相关推荐 -->
|
|
|
+ <view class="title"><view class="title-tab">相关推荐</view></view>
|
|
|
+ <view class="content hot">
|
|
|
+ <recommend :query-productid="product.productID" v-if="isRequest" ></recommend>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品参数 -->
|
|
|
+ <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="title">商品参数</view>
|
|
|
+ <cm-parameter :product="product" :goodsData="goodsData" ></cm-parameter>
|
|
|
+ <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>
|
|
|
+ <!-- 侧边 -->
|
|
|
+ <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -164,6 +163,7 @@
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
+ productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
|
|
|
clickPath:'/search/pages/search/search-second',
|
|
|
disabledTabNavList:[{name:'相关推荐'}],
|
|
|
mode:'round',
|
|
|
@@ -174,6 +174,7 @@
|
|
|
isScrollTop:false,
|
|
|
current:0,
|
|
|
isShareType:'',
|
|
|
+ isInvalid:false,
|
|
|
isHeaderPoduct:false,
|
|
|
isNavbarFiexd:false,
|
|
|
navbarFiexd:'none',
|
|
|
@@ -184,7 +185,7 @@
|
|
|
disabled:false,
|
|
|
isNoneDisabled:false,
|
|
|
tabCurrentIndex:0,
|
|
|
- userID:'',
|
|
|
+ userId:'',
|
|
|
productID:0,
|
|
|
userIdentity:'',//用户类型
|
|
|
goodsData:{},//自定义数据
|
|
|
@@ -228,7 +229,7 @@
|
|
|
},
|
|
|
methods:{
|
|
|
initData(){// 初始化商品详情查询
|
|
|
- this.SecondService.ProductDetail({productId:this.productID}).then(response =>{
|
|
|
+ this.SecondService.ProductDetail({productId:this.productID,userId:this.userId}).then(response =>{
|
|
|
this.skeletonShow = false
|
|
|
this.productImage=[];
|
|
|
this.shop = response.data.shop
|
|
|
@@ -242,7 +243,7 @@
|
|
|
},2000)
|
|
|
this.isRequest = true
|
|
|
}).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
+ this.isInvalid = true
|
|
|
})
|
|
|
},
|
|
|
swiperChange(e) {//顶部商品图片切换
|
|
|
@@ -412,7 +413,7 @@
|
|
|
},
|
|
|
onShow() {
|
|
|
this.$api.getStorage().then((resolve) => {
|
|
|
- this.userID = resolve.userId ? resolve.userId : '';
|
|
|
+ this.userId = resolve.userId ? resolve.userId : '';
|
|
|
this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 3
|
|
|
if (isPreviewImg) {
|
|
|
isPreviewImg = false;
|
