bbnv1
/
test
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

特产改版

master
jiazhipeng 8 months ago
parent
55a676c2dc
commit
213d666841
3 changed files with 168 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      pages/info/postProductInfo/index.js
  2. 64
      pages/info/postProductInfo/index.wxml
  3. 170
      pages/info/postProductInfo/index.wxss

26
pages/info/postProductInfo/index.js
View File

@ -11,7 +11,7 @@ Page({
* 页面的初始数据
*/
data: {
autoPlay: true,
autoPlay: false,
fixed: false,
type: 1,
top: 0,
@ -37,7 +37,13 @@ Page({
showQrCode: false,
wxqrcode: null,
ZTPoint:''
ZTPoint:'',
swiperCurrent: 0,
swiperRange: {
video: {min:0,max:0},
picture: {min:0,max:0},
sku: {min:0,max:0}
}
},
/**
@ -100,10 +106,16 @@ Page({
}
} catch(e) {}
let swiperRange = this.data.swiperRange;
swiperRange.video = resData.videourl? { min: 0, max: 0 } : { min: -1, max: -1 }
swiperRange.picture = {min:swiperRange.video.max+1, max:swiperRange.video.max+1+resData.listimg.length-1}
swiperRange.sku = {min:swiperRange.picture.max+1,max:swiperRange.picture.max+1+resData.sku.length-1}
console.log(swiperRange)
this.setData({
info: resData,
supplierId: res.data.supplier_id,
iShop: res.data.supplier_id ? true : false
iShop: res.data.supplier_id ? true : false,
swiperRange: swiperRange
})
// 获取补贴
@ -732,6 +744,14 @@ Page({
}
},
swiperChange (e) {
let index = e.detail.current
this.setData({
swiperCurrent: index
})
console.log(e, this.data.swiperCurrent)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/

64
pages/info/postProductInfo/index.wxml
View File

@ -2,11 +2,22 @@
<wxs src="../../../utils/filter.wxs" module="tool" />
<title title="产品详情"></title>
<view class="iconfont icon-fenxiang" bindtap="share"></view>
<view class="swiper-bottom" wx:if="{{info}}">
<view class="swiper-bottom-item active">1/2</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.video.min&&swiperCurrent<=swiperRange.video.max)?'active':''}}" wx:if="{{info.videourl}}">视频</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}">图片</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.sku.min&&swiperCurrent<=swiperRange.sku.max)?'active':''}}">款式</view>
</view>
<image wx:for="{{info.sku}}" style="{{aniSkuIndex==index?('top:'+cartTop+'px;'):('top:'+top+'px;'+cartImgInfo)}}" class="headimg{{aniSkuIndex==index?' active':''}}" src="{{info.headimg}}" mode="aspectFill"></image>
<swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}" autoplay="{{autoPlay}}" interval="{{2000}}" duration="{{300}}">
<swiper class="swiper" wx:if="{{info}}" autoplay="{{autoPlay}}" current="{{swiperCurrent}}"
interval="{{2000}}" duration="{{300}}" bindchange="swiperChange">
<block wx:if="{{info.videourl}}" wx:key="*this">
<swiper-item>
<video bindplay="playVideo" src="{{info.videourl}}" controls></video>
<video bindplay="playVideo" src="{{info.videourl}}" autoplay="{{true}}" muted="{{true}}"
show-mute-btn="{{true}}" show-background-playback-button="{{false}}"
show-progress="{{false}}"></video>
<!-- <image src="{{info.headimg}}" mode="aspectFill"></image> -->
</swiper-item>
</block>
@ -15,6 +26,12 @@
<image src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</block>
<block wx:for="{{info.sku}}" wx:key="*this">
<swiper-item style="position: relative;">
<image src="{{item.headimg}}" mode="aspectFill"></image>
<view class="sku-tips textOver">{{item.sku_name}}</view>
</swiper-item>
</block>
</swiper>
<view class="allowance-box" wx:if="{{allowance_data}}" bindtap="changeAllowance">
补贴价
@ -24,14 +41,24 @@
<view wx:if="{{info}}">
<!-- 酒景套餐 -->
<view class="top-info" style="padding: 0;" wx:if="{{info.is_package===1}}">
<div class="wineScene-price-container" >
<div class="wineSecne-price">{{info.price/100}}<span class="wineSecne-money">￥{{info.market_price/100}}</span></div>
<div>已售{{info.sales_number||0}}份</div>
</div>
<view style="padding: 26rpx 26rpx 0;">
<view class="title" style="font-weight: bold;">{{info.title}}</view>
<view class="hotel-custom" style="padding:26rpx 0">
<view class="top-info" style="padding: 0;" >
<view class="wineScene-price-container" >
<view class="wineSecne-price">{{info.price/100}}<text class="wineSecne-money">优惠前￥{{info.market_price/100}}</text></view>
<view>已售{{info.sales_number>1000?"1000+":(info.sales_number||0)}}</view>
</view>
<view style="padding: 20rpx 20rpx 20rpx 26rpx;">
<view class="select-img">
<image style="flex-shrink: 0;" src="{{info.headimg}}"></image>
<text style="flex-shrink: 0;" class="select-img-text">款式选择</text>
<view class="other-imgs no-scrollbar">
<image wx:for="{{info.sku}}" wx:key="index" src="{{item.headimg}}"></image>
</view>
<view class="select-sku">></view>
</view>
<view class="title textOver2">{{info.title}}</view>
<!-- <view class="hotel-custom" style="padding:26rpx 0">
<view class="hotel-custom-detail" wx:for="{{info.product_data}}" wx:key="item">
<view class="tip-info">
<view class="tip">{{index}}</view>
@ -47,10 +74,15 @@
</view>
</view>
</view> -->
<view class="tags-box textOver">
<view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}</view>
</view>
</view>
<view style="width: 100%;background:#f2f2f2;padding-top: 16rpx;margin-bottom: -8rpx;" bindtap="gotolocation">
<view style="width: 100%;background:#f2f2f2;padding-top: 16rpx;margin-bottom: -8rpx;"
bindtap="gotolocation" wx:if="{{info.is_package===1}}">
<view class="map-container">
<view>
<view class="textOver" style="font-weight: 500;font-size: 28rpx;color: #000000;width: 600rpx;">{{info.scene_name}}</view>
@ -64,15 +96,7 @@
</view>
</view>
</view>
<view class="top-info" wx:else>
<view class="title">{{info.title}}</view>
<view class="subtitle">{{info.subtitle}}</view>
<view class="tags-box textOver">
<view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}<view class="line"></view>
</view>
<view class="tags-price"><text>￥</text><text>{{info.price/100}}</text><text>起</text></view>
</view>
</view>
</view>
<!-- 买家评价 -->

170
pages/info/postProductInfo/index.wxss
View File

@ -5,92 +5,66 @@ page {
.swiper {
width: 100%;
height: 420rpx;
height: 750rpx;
}
.swiper image,
.swiper video {
height: 420rpx;
.swiper image,.swiper video {
height: 750rpx;
display: block;
width: 100%;
}
.swiper-bottom{
position: absolute;
/* top: 750rpx; */
margin-top: 694rpx;
right: 0;
width: fit-content;
height: 56rpx;
line-height: 56rpx;
background: rgba(1, 0, 0, 0.6);
border-radius: 13rpx 0 0 13rpx;
display: flex;
font-weight: 500;
font-size: 24rpx;
color: rgba(255,255,255,0.5);
z-index: 10;
padding: 0 5rpx;
overflow: hidden;
}
.swiper-bottom-item{
padding: 0 14rpx;
}
.swiper-bottom-item.active{
color: #fff;
}
.top-info {
border-radius: 20rpx 20rpx 0 0;
background: white;
position: relative;
z-index: 1;
margin-top: -20rpx;
padding: 20rpx 40rpx;
}
.top-info .title {
font-size: 32rpx;
font-weight: 500;
color: #000;
}
.top-info .subtitle {
color: #666;
font-size: 27rpx;
margin-top: 20rpx;
font-weight: bold;
font-size: 33rpx;
color: #000000;
}
.tags-box {
margin-top: 10rpx;
display: flex;
align-items: center;
font-weight: 500;
font-size: 25rpx;
color: #0B898E;
font-size: 27rpx;
height: 50rpx;
}
.tags-box .tag {
position: relative;
line-height: 20rpx;
font-size: 20rpx;
font-weight: 500;
line-height: 50rpx;
margin-right: 10rpx;
}
.tags-box .tag .line {
content: "1";
display: block;
font-size: 0;
position: absolute;
left: 0;
right: 0;
background: #DAF3E9;
height: 8rpx;
top: 30rpx;
z-index: -1;
}
.tags-price {
flex: 1;
text-align: right;
color: #D62828;
}
.tags-price text:nth-child(1) {
font-size: 27rpx;
}
.tags-price text:nth-child(2) {
font-size: 40rpx;
font-weight: bold;
}
.tags-price text:nth-child(3) {
font-size: 20rpx;
color: #999999;
margin-left: 4rpx;
}
.tags-box .iconfont {
margin-left: 4rpx;
font-size: 24rpx;
margin-top: 27rpx;
height: 40rpx;
line-height: 40rpx;
margin-right: 15rpx;
padding: 0 14rpx;
background: rgba(11, 137, 142, 0.1);
border-radius: 4rpx;
}
.address-box {
@ -983,8 +957,9 @@ height: 133rpx;
.wineScene-price-container {
width: 750rpx;
height: 100rpx;
background: linear-gradient(-90deg,#FF413B, #FFAB2E);
border-radius: 20rpx 20rpx 0rpx 0rpx;
/* background: linear-gradient(-90deg,#FF413B, #FFAB2E); */
background: #FD3856;
/* border-radius: 20rpx 20rpx 0rpx 0rpx; */
display: flex;
align-items: center;
justify-content: space-between;
@ -996,13 +971,13 @@ height: 133rpx;
.wineScene-price-container .wineSecne-price {
font-weight: bold;
font-size: 36rpx;
font-size: 48rpx;
color: #FFFFFF;
}
.wineScene-price-container .wineSecne-money {
font-size: 24rpx;
font-weight: 500;
text-decoration-line: line-through;
/* text-decoration-line: line-through; */
padding-left: 14rpx;
}
.wineScene-price-container .wineSecne-price::before {
@ -1074,3 +1049,60 @@ height: 133rpx;
width: 29rpx;
height: 29rpx;
}
.select-img{
display: flex;
height: 80rpx;
position: relative;
margin-bottom: 26rpx;
}
.select-img image{
width: 80rpx;
height: 80rpx;
border-radius: 13rpx;
margin-right:20rpx;
flex-shrink: 0;
}
.select-img .select-img-text{
font-weight: bold;
font-size: 24rpx;
color: #000000;
width: 51rpx;
height: 80rpx;
margin-right:20rpx;
display: flex;
align-items: center;
}
.select-img .other-imgs{
flex: 1;
width: 100rpx;
overflow-x: auto;
display: flex;
}
.select-img .select-sku{
position: absolute;
top: 0;
right: 0;
width: 25rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: white;
font-family: fangsong;
color: #999;
}
.sku-tips{
width: fit-content;
max-width: 533rpx;
height: 53rpx;
background: rgba(1, 0, 0, 0.6);
border-radius: 27rpx;
padding: 0 28rpx;
line-height: 53rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
position: absolute;
bottom: 73rpx;
margin: 0 auto;
}
Write Preview
Loading…
Cancel
Save