Browse Source

特产

master
jiazhipeng 8 months ago
parent
commit
c7b33e278a
  1. 17
      pages/info/postProductInfo/index.js
  2. 81
      pages/info/postProductInfo/index.wxml
  3. 44
      pages/info/postProductInfo/index.wxss

17
pages/info/postProductInfo/index.js

@ -105,6 +105,19 @@ Page({
// 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);

81
pages/info/postProductInfo/index.wxml

@ -2,25 +2,15 @@
<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>
</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}}"
<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="{{true}}" ></video>
show-progress="{{false}}" ></video>
<!-- <image src="{{info.headimg}}" mode="aspectFill"></image> -->
</swiper-item>
</block>
@ -37,7 +27,20 @@
</view>
</swiper-item>
</block>
</swiper>
</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>
<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

@ -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;

Loading…
Cancel
Save