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

特产

master
jiazhipeng 8 months ago
parent
07c94b6884
commit
c7b33e278a
3 changed files with 119 additions and 87 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. 43
      pages/info/postProductInfo/index.js
  2. 119
      pages/info/postProductInfo/index.wxml
  3. 44
      pages/info/postProductInfo/index.wxss

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

@ -91,20 +91,33 @@ Page({
let resData = res.data
try {
if (resData.product_data && resData.is_package==1) {
for(let key in resData.product_data) {
resData.product_data[key] = JSON.parse(resData.product_data[key])
if (resData.product_data && resData.is_package==1) {
for(let key in resData.product_data) {
resData.product_data[key] = JSON.parse(resData.product_data[key])
}
// if (resData.product_data["住"]) {
// resData.product_data["住"] = JSON.parse(resData.product_data["住"])
// }
// if (resData.product_data["游"]) {
// resData.product_data["游"] = JSON.parse(resData.product_data["游"])
// }
// if (resData.product_data["食"]) {
// resData.product_data["食"] = JSON.parse(resData.product_data["食"])
// }
}
// if (resData.product_data["住"]) {
// resData.product_data["住"] = JSON.parse(resData.product_data["住"])
// }
// if (resData.product_data["游"]) {
// resData.product_data["游"] = JSON.parse(resData.product_data["游"])
// }
// if (resData.product_data["食"]) {
// resData.product_data["食"] = JSON.parse(resData.product_data["食"])
// }
}
resData.shipment_tag_arr = []
if (resData.shipment_tag) {
resData.shipment_tag_arr = resData.shipment_tag.split(',')
resData.shipment_tag_str = resData.shipment_tag_arr.slice(1).join(' | ')
}
if (resData.service_tag) {
resData.service_tag_str = resData.service_tag.split(',').join(' | ')
}
if (resData.parameter_tag) {
resData.parameter_tag_str = resData.parameter_tag.split(',').join(' | ')
}
} catch(e) {}
let swiperRange = this.data.swiperRange;
@ -159,14 +172,14 @@ Page({
commonApi._post("search/product_recommend", {
offset: 0,
limit: 6,
limit: 4,
rand: true,
type: 'post',
product_ids:options.id,
}).then(res => {
try {
this.setData({
tjList: res.data.list
tjList: res.data.list.slice(0,4)
})
} catch (error) {
console.log(error);

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

@ -2,42 +2,45 @@
<wxs src="../../../utils/filter.wxs" module="tool" />
<title title="产品详情"></title>
<view class="share-icon" bindtap="share"></view>
<view class="swiper-bottom" wx:if="{{info}}">
<view class="swiper-bottom-item bottom-number active">{{swiperCurrent+1}}/{{swiperRange.sku.max+1}}</view>
<view class="swuper-bottom-bg">
<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>
<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>
<view style="position: relative;">
<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}}" 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>
<block wx:for="{{info.listimg}}" wx:key="*this">
<swiper-item>
<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 ">
<view class="textOver">{{item.sku_name}}</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="swiper-bottom" wx:if="{{info}}">
<view class="swuper-bottom-bg">
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.video.min&&swiperCurrent<=swiperRange.video.max)?'active':''}}"
wx:if="{{info.videourl}}" bind:tap="changeSwiperCurrent" data-index="{{0}}">视频</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}"
bind:tap="changeSwiperCurrent" data-index="{{swiperRange.picture.min}}">图片</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.sku.min&&swiperCurrent<=swiperRange.sku.max)?'active':''}}"
bind:tap="changeSwiperCurrent" data-index="{{swiperRange.sku.min}}">款式</view>
</view>
<view class="swiper-bottom-item bottom-number active">{{swiperCurrent+1}}/{{swiperRange.sku.max+1}}</view>
</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" 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}}" autoplay="{{true}}" muted="{{true}}"
show-mute-btn="{{true}}" show-background-playback-button="{{false}}"
show-progress="{{true}}" ></video>
<!-- <image src="{{info.headimg}}" mode="aspectFill"></image> -->
</swiper-item>
</block>
<block wx:for="{{info.listimg}}" wx:key="*this">
<swiper-item>
<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 ">
<view class="textOver">{{item.sku_name}}</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="allowance-box" wx:if="{{allowance_data}}" bindtap="changeAllowance">
补贴价
<view class="com-price two">￥{{ allowance_data.mini_price / 100 }}起</view>
@ -71,22 +74,25 @@
</view>
<view class="other-info-box" wx:if="{{info.is_package!=1}}">
<view class="other-info-item" style="align-items: flex-start;"bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{1}}">
<view class="other-info-item" style="align-items: flex-start;"bindtap="changeSimpleVal"
data-keyname="otherInfoShow" data-val="{{1}}" wx:if="{{info.shipment_tag}}">
<image style="margin-top: 6rpx;" src="https://static.ticket.sz-trip.com/uploads/20250826/c520e7e453443bfe19e27ea0e44e6b22.png"></image>
<view class="other-content">
<view style="color: #0B898E;">预计48小时内发货</view>
<view style="padding-top: 10rpx;">江苏苏州 | 快递：免运费</view>
<view class="other-content" >
<view class="textOver" style="color: #0B898E;">{{info.shipment_tag_arr[0]}}</view>
<view class="textOver" style="padding-top: 10rpx;">{{info.shipment_tag_str}}</view>
</view>
<view style="margin-top: 6rpx;" class="view-arrow">></view>
</view>
<view class="other-info-item" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{2}}">
<view class="other-info-item" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{2}}"
wx:if="{{info.service_tag_str}}">
<image src="https://static.ticket.sz-trip.com/uploads/20250826/30fc41c747c0126edd396ef92ff7ef62.png"></image>
<view class="other-content">极速退款 | 未使用可退 | 客服售后</view>
<view class="other-content textOver">{{info.service_tag_str}}</view>
<view class="view-arrow">></view>
</view>
<view class="other-info-item" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{3}}">
<view class="other-info-item" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{3}}"
wx:if="{{info.parameter_tag_str}}">
<image src="https://static.ticket.sz-trip.com/uploads/20250826/049b31024ee73e76f9612e8d8141bd66.png"></image>
<view class="other-content">名称 鸡头米 | 产地 苏州 | 类型 机剥 | 重量 500g</view>
<view class="other-content textOver">{{info.parameter_tag_str}}</view>
<view class="view-arrow">></view>
</view>
</view>
@ -205,21 +211,21 @@
<view class="info-title">预订须知</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text>
</view>
<view style="height: 20rpx;width: 100%;background: #F7F7F7;"></view>
<view class="proad" id="box4">
<view class="proad-title">
<view class="info-box" id="box4" style="padding: 20rpx 26rpx;">
<!-- <view class="proad-title">
<image mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20221027/93dd0ad8fade0ad845e6b67512b4e61b.png"></image>
</view>
</view> -->
<view class="info-title">产品推荐</view>
<view class="pro-list">
<view class="proitem" wx:for="{{tjList}}" bindtap="gotoDetail" data-item="{{item}}">
<view class="item-hd">
<image src="{{item.headimg}}"></image>
</view>
<view class="item-bm">
<view class="protitle textOver">{{item.title}}</view>
<view class="pro-price">
{{item.price/100}}
</view>
<view class="item-bm" style="height: 120rpx;display: flex;flex-direction: column;justify-content: space-between;">
<view class="protitle textOver2">{{item.title}}</view>
<view class="pro-price">{{item.price/100}}</view>
</view>
</view>
</view>
@ -348,19 +354,26 @@
<view class="other-info-content">
<view class="title">{{otherInfoShow==3?"产品参数":otherInfoShow==2?"服务说明":"发货说明"}}</view>
<view wx:if="{{otherInfoShow==1}}">
<view class="key-title">该商品预计13小时内发货</view>
<view class="key-content">订单支付成功后48小时内发货，若未在48小时内发货消费者 可联系客服咨询催促发货。</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.shipment_info)}}"></rich-text>
<!-- <view class="key-title">该商品预计13小时内发货</view>
<view class="key-content">订单支付成功后48小时内发货，若未在48小时内发货消费者 可联系客服咨询催促发货。</view> -->
</view>
<view wx:if="{{otherInfoShow==2}}">
<rich-text class="details" nodes="{{tool.formateRichText(info.service_info)}}"></rich-text>
</view>
<view wx:if="{{otherInfoShow==3}}">
<view class="prod-param">
<rich-text class="details" nodes="{{tool.formateRichText(info.parameter_info)}}"></rich-text>
<!-- <view class="prod-param">
<view class="prod-key">名称</view>
<view class="prod-content">鸡头米</view>
</view>
<view class="prod-param">
<view class="prod-key">购买须知</view>
<view class="prod-content">购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知</view>
</view>
</view> -->
</view>
</view>

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

@ -15,41 +15,45 @@ page {
.swiper-bottom{
position: absolute;
/* top: 750rpx; */
margin-top: 694rpx;
bottom: 77rpx;
right: 0;
width: fit-content;
height: 56rpx;
line-height: 56rpx;
/* background: rgba(1, 0, 0, 0.6);
border-radius: 13rpx 0 0 13rpx; */
width: 90rpx;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 500;
font-size: 24rpx;
color: rgba(255,255,255,0.5);
z-index: 10;
overflow: hidden;
}
.swuper-bottom-bg{
display: flex;
background: rgba(1, 0, 0, 0.6);
border-radius: 13rpx 0 0 0;
padding: 0 5rpx;
border-radius: 20rpx 0rpx 0rpx 20rpx;
display: flex;
flex-direction: column;
width: 100%;
padding: 8rpx 0;
margin-bottom: 12rpx;
}
.swiper-bottom-item{
padding: 0 14rpx;
width: 100%;
text-align: center;
padding: 14rpx 0;
}
.swiper-bottom-item.active{
color: #fff;
}
.swiper-bottom-item.bottom-number{
max-width: 100%;
width: fit-content;
background: rgba(1, 0, 0, 0.6);
border-radius: 13rpx;
height: 40rpx;
line-height: 40rpx;
padding: 0 10rpx;
margin-right: 6rpx;
overflow: hidden;
box-sizing: border-box;
}
.top-info {
@ -459,8 +463,9 @@ page {
}
.btns .btn:nth-child(1) {
margin-right: 3rpx;
/* margin-right: 3rpx; */
border-radius: 39rpx 0 0 39rpx;
background: #FD7601;
}
.btns .btn:nth-child(2) {
@ -692,6 +697,7 @@ width: 250rpx;
border-radius: 50%;
right: 20rpx;
bottom: 166rpx;
z-index: 15;
}
.cart-box image {
@ -922,16 +928,16 @@ height: 133rpx;
flex-wrap: wrap;
}
.proitem{
width: 226rpx;
height: 234rpx;
width: 334rpx;
height: 497rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-top: 20rpx;
}
.item-hd image{
width: 226rpx;
height: 130rpx;
border-radius: 10rpx 10rpx 0px 0px;
width: 334rpx;
height: 342rpx;
border-radius: 13rpx 13rpx 0px 0px;
}
.item-bm{
padding: 8rpx 12rpx;

Write Preview
Loading…
Cancel
Save