|
|
@@ -13,24 +13,33 @@
|
|
|
<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" circular @change="swiperChange" :duration='800' :autoplay="false" :circular="false" >
|
|
|
+ <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">
|
|
|
- <view v-for="(item,idx) in productImage"
|
|
|
- :key="idx"
|
|
|
- :class="[idx===current?'swiper__dots-long':'none']"
|
|
|
- :data-index="current" class="swiper__dots-item">
|
|
|
- </view>
|
|
|
+ <tui-tag padding="12rpx 24rpx" type="translucent" shape="square" 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" v-if="!goodsData.isNoneDisabled">
|
|
|
+ <cm-price v-if="isRequest"
|
|
|
+ :product="product"
|
|
|
+ :userIdentity="userIdentity"
|
|
|
+ :promotions="product.promotions"
|
|
|
+ :ladderPriceList="ladderPriceList"/>
|
|
|
+ </view>
|
|
|
<view class="p-title tui-skeleton-fillet">
|
|
|
- {{product.name == undefined ? '' : product.name}}
|
|
|
+ <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>
|
|
|
@@ -38,19 +47,20 @@
|
|
|
<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="wrap-top-price" v-if="!goodsData.isNoneDisabled">
|
|
|
- <cm-price v-if="isRequest"
|
|
|
- :product="product"
|
|
|
- :userIdentity="userIdentity"
|
|
|
- :promotions="product.promotions"
|
|
|
- :ladderPriceList="ladderPriceList"/>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="attributes">
|
|
|
- <cm-attributes v-if="isRequest" :product="product" :goodsData="goodsData" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="product-seve">
|
|
|
+ <text class="title">服务：</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="product-supplier" @click="goSupplier">
|
|
|
+ <text class="title">参数：</text>
|
|
|
+ <text class="name">品牌 起订量 分类...</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
<view class="product-supplier" @click="goSupplier">
|
|
|
<text class="title">供应商信息</text>
|
|
|
<text class="name">{{shop.name}}</text>
|
|
|
@@ -530,7 +540,17 @@
|
|
|
},
|
|
|
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]}`
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
onPageScroll(e){//实时获取到滚动的值
|
|
|
if(e.scrollTop>50){
|
|
|
@@ -606,7 +626,6 @@
|
|
|
width: 100%;
|
|
|
height: 750rpx;
|
|
|
position: relative;
|
|
|
- border-bottom: 1px solid #EBEBEB;
|
|
|
}
|
|
|
.banner{
|
|
|
width: 100%;
|
|
|
@@ -621,19 +640,9 @@
|
|
|
}
|
|
|
.swiper__dots-box{
|
|
|
position: absolute;
|
|
|
- bottom: 24px;
|
|
|
- right: 24rpx;
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
- display: flex;
|
|
|
- /* #endif */
|
|
|
- flex: 1;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 12rpx;
|
|
|
- padding: 10rpx;
|
|
|
- background: rgba(174,174,174,0.6);
|
|
|
- border-radius:16rpx;
|
|
|
+ color: #fff;
|
|
|
+ bottom: 30rpx;
|
|
|
+ right: 30rpx;
|
|
|
.swiper__dots-item{
|
|
|
width: 12rpx;
|
|
|
height: 12rpx;
|
|
|
@@ -668,17 +677,36 @@
|
|
|
}
|
|
|
}
|
|
|
.p-title{
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- font-weight: Bold;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .p-title-name{
|
|
|
+ width:602rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 42rpx;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .p-title-share{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ float: right;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8rpx 0;
|
|
|
+ .icon-fenxiang1{
|
|
|
+ font-size: $font-size-34;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.wrap-main-text{
|
|
|
line-height: 56rpx;
|
|
|
@@ -776,13 +804,12 @@
|
|
|
padding: 0 18rpx;
|
|
|
line-height: 32rpx;
|
|
|
font-size: $font-size-20;
|
|
|
- color: #999999;
|
|
|
+ color:$color-system;
|
|
|
text-align: center;
|
|
|
- border-radius: 16rpx;
|
|
|
- background:#FFFFFF;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background:#ffe6dc;
|
|
|
margin: 0 20rpx 15rpx 0;
|
|
|
display: inline-block;
|
|
|
- border: 1px solid #EDEDED;
|
|
|
}
|
|
|
}
|
|
|
.wrap-top-price{
|
|
|
@@ -797,18 +824,20 @@
|
|
|
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-24;
|
|
|
+ font-size: $font-size-26;
|
|
|
}
|
|
|
.txt.big{
|
|
|
- font-size: $font-size-32;
|
|
|
+ font-size: $font-size-34;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -914,6 +943,34 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .product-seve{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ flex: 2;
|
|
|
+ line-height: 88rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .iconfont{
|
|
|
+ color: $color-system;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $text-color;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.product-supplier{
|
|
|
width: 702rpx;
|
|
|
height: 88rpx;
|
|
|
@@ -953,6 +1010,7 @@
|
|
|
width: 48rpx;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
}
|
|
|
}
|
|
|
.product-details {
|
