大图模式

前端开发-罗建龙
1 parent 3c428e9e
Showing 3 changed files with 117 additions and 10 deletions
components/diy_seckill/diy_seckill.js
components/diy_seckill/diy_seckill.wxml
components/diy_seckill/diy_seckill.wxss
@@ -125,7 +125,17 @@ Component({
         th.no_gid_set();
       }
     },
+    imageLoad(e){
+      var width=e.detail.width,  //获取图片真实宽度
+      height=e.detail.height,
+      ratio=width/height;  //图片的真实宽高比例
+      let object=this.data.object
+      let picture_scale=object.picture_scale
+      if (condition) {
+        
+      }
  
+    },
     //当是默认的情况
     no_gid_set() {
       var user_id=getApp().globalData.user_id;
 <block wx:if="{{goods_array.length>0}}">
+        <!--新版秒杀组件-->  
   <block wx:if="{{object.column_action_name}}">
-        <!--秒杀--> 
     <view class='top' bindtap="go_to_skill" wx:if="{{object.column_title}}" style="{{'background-image:url('+object.column_diy_title+')'}}">
       <view class="flex">
         <view class='t_left'></view>
@@ -10,14 +10,19 @@
         <image src="{{imghost}}/miniapp/images/icon-arrowdown.png" lazy-load="true"></image>
       </view>
     </view>
+    <!-- 大图模式 -->
     <block wx:if="{{object.style==1}}"> 
-      <view style="{{'padding-left:'+object.page_margins+'px;padding-right:'+object.page_margins+'px;'}}"  class="new_item1_box">
+      <view style="{{'padding-left:'+object.page_margins+'px;padding-right:'+object.page_margins+'px;'}}"  class="{{'new_item1_box '+ ((object.product_style==1 || object.product_style==3 )? ' bgf ':'')}}">
         <block wx:for="{{goods_array}}">
-          <view wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind" class="{{'new_item1 ' + (object.product_style==2 ? ' boxsha ':'') + (object.product_style==3 ? ' aborder ':'')  + (object.chamfer_of_main_drawing==2 ? ' but_radius5 ':'')  + ((object.product_style==1 || object.product_style==3 )? ' bgf ':'')}}" style="{{'margin-bottom:'+object.page_margins+'px;'}}">
+          <view wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind" class="{{'new_item1 ' + (object.product_style==2 ? ' boxsha ':'') + (object.product_style==3 ? ' aborder ':'')  + (object.chamfer_of_main_drawing==2 ? ' but_radius5 ':'')  + ((object.product_style==1 || object.product_style==3 )? ' bgf ':'')}}" style="{{'margin-bottom:'+object.product_spacing+'px;'}}">
             <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
-              <view class="imgBox">
+              <view class="imgBox"> 
                 <!-- <image  mode="{{object.picture_fill==1 ? 'aspectFill' : 'scaleToFill'}}" class="{{'new_item1_image '+ 'aspect_ratio'+object.picture_scale}}" style="{{'width:'+img_width+';height:'+img_height}}" src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> -->
-                <image  mode="scaleToFill" class="{{'new_item1_image '+ 'aspect_ratio'+object.picture_scale}}"  src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
+                <view class="{{'container'+object.picture_scale}}" style="{{object.picture_fill==1 ? 'background-color: #fff;' : ''}}">
+                  <!-- <image  mode="{{object.picture_fill==1 ? 'aspectFit' : 'aspectFill'}}" class="{{'new_item1_image images1'}}"  src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> -->
+                  <image  mode="{{object.picture_fill==1 ? 'aspectFit' : 'aspectFill'}}" class="{{'new_item1_image images1'}}"  src="./t1.png" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
+                </view>
+               
                 <image class="imgBox_img" wx:if="{{object.subscript_style==5}}" src="{{object.subscript_diy_style}}"></image>
                 <image class="imgBox_img" wx:if="{{object.subscript_style<=4}}" src="{{imghost+'/miniapp/images/component/j0'+object.subscript_style +'.png'}}"></image>
               </view>
@@ -28,10 +33,10 @@
                   <view>{{aitem.djs.day}}天{{aitem.djs.hou}}:{{aitem.djs.min}}:{{aitem.djs.sec}}</view>
                 </view>
               </view>
-              <view class="ellipsis-2 new_item1_goods_name" wx:if="{{object.trade_name}}">{{aitem.goods_name}}</view>
-              <view class="new_item1_price">
-                <view>
-                  <view class="flex" style="font-size: 28rpx;">
+              <view class="ellipsis-2 new_item1_goods_name" style="{{(object.text_style==2 ? 'font-weight: bold;':'') + (object.text_align==2 ? 'text-align:center;' :'' )}}" wx:if="{{object.trade_name}}">{{aitem.goods_name}}</view>
+              <view class="new_item1_price" style="{{(object.text_align==2 ? 'justify-content:center;flex-direction:column;' :'' )}}">
+                <view style="{{(object.text_style==2 ? 'font-weight: bold;':'')}}">
+                  <view class="flex" style="{{'font-size: 28rpx; ' +(object.text_align==2 ? 'justify-content:center;' :'' ) }}">
                     <view class="clor" style="margin-right: 5rpx;" wx:if="{{object.commodity_price}}">￥<text style="font-size:42rpx;">{{aitem.price}}</text></view>
                     <view wx:if="{{object.wholesale_price}}">￥{{aitem.market_price}}</view>
                   </view>
@@ -50,6 +55,51 @@
         </block>
       </view>
     </block>
+    <!-- 一行两个 -->
+    <block wx:if="{{object.style==2}}"> 
+      <view style="{{'padding-left:'+object.page_margins+'px;padding-right:'+object.page_margins+'px;'}}"  class="{{'flex2 new_item1_box '+ ((object.product_style==1 || object.product_style==3 )? ' bgf ':'')}}">
+        <block wx:for="{{goods_array}}">
+          <view wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind"  class="{{'new_item1 ' + (object.product_style==2 ? ' boxsha ':'') + (object.product_style==3 ? ' aborder ':'')  + (object.chamfer_of_main_drawing==2 ? ' but_radius5 ':'')  + ((object.product_style==1 || object.product_style==3 )? ' bgf ':'')}}" style="{{'margin-bottom:'+object.product_spacing+'px; '+('width:calc(100%/2 - ' + object.product_spacing/2+'px)')}}">
+            <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
+              <view class="imgBox"> 
+                <!-- <image  mode="{{object.picture_fill==1 ? 'aspectFill' : 'scaleToFill'}}" class="{{'new_item1_image '+ 'aspect_ratio'+object.picture_scale}}" style="{{'width:'+img_width+';height:'+img_height}}" src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> -->
+                <view class="{{'container'+object.picture_scale}}" style="{{object.picture_fill==1 ? 'background-color: #fff;' : ''}}">
+                  <!-- <image  mode="{{object.picture_fill==1 ? 'aspectFit' : 'aspectFill'}}" class="{{'new_item1_image images1'}}"  src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> -->
+                  <image  mode="{{object.picture_fill==1 ? 'aspectFit' : 'aspectFill'}}" class="{{'new_item1_image images1'}}"  src="./t1.png" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
+                </view>
+               
+                <image class="imgBox_img" wx:if="{{object.subscript_style==5}}" src="{{object.subscript_diy_style}}"></image>
+                <image class="imgBox_img" wx:if="{{object.subscript_style<=4}}" src="{{imghost+'/miniapp/images/component/j0'+object.subscript_style +'.png'}}"></image>
+              </view>
+              <view class="new_item1_time" wx:if="{{object.count_down}}" style="justify-content: center;">
+                <!-- <image src="{{imghost+'/miniapp/images/component/seckill.png'}}"></image> -->
+                <!-- <view style="text-align: center;">
+                  <view>距结束时间</view> -->
+                  <view>{{aitem.djs.day}}天{{aitem.djs.hou}}:{{aitem.djs.min}}:{{aitem.djs.sec}}</view>
+                <!-- </view> -->
+              </view>
+              <view class="ellipsis-2 new_item1_goods_name" style="{{(object.text_style==2 ? 'font-weight: bold;':'') + (object.text_align==2 ? 'text-align:center;' :'' )}}" wx:if="{{object.trade_name}}">{{aitem.goods_name}}</view>
+              <view class="new_item1_price" style="color: rgb(56, 56, 56);">
+                   <text wx:if="{{object.seconds_num}}">已秒 <text class="clor">10</text>件，</text>
+                    <text wx:if="{{object.remaining_inventory}}">还剩余<text class="clor">20</text>件</text>
+                  </view>
+              <view class="new_item1_price" style="{{(object.text_align==2 ? 'justify-content:center;flex-direction:column;' :'' )}}">
+                <view style="{{(object.text_style==2 ? 'font-weight: bold;':'')}}">
+                  <view  style="{{'font-size: 28rpx; ' +(object.text_align==2 ? 'justify-content:center;' :'' ) }}">
+                    <view class="clor" style="margin-right: 5rpx;" wx:if="{{object.commodity_price}}">￥<text style="font-size:42rpx;">{{aitem.price}}</text></view>
+                    <view wx:if="{{object.wholesale_price}}">￥{{aitem.market_price}}</view>
+                  </view>
+                </view>
+                <view>
+                  <image wx:if="{{object.purchase_button<=4}}" src="{{imghost+'/miniapp/images/component/0'+object.purchase_button+'.png'}}" style="width: 122rpx;height: 122rpx;"></image>
+                  <view  wx:if="{{ 5<=object.purchase_button && object.purchase_button<=8 }}" class="{{'new_item1_but ' + (object.purchase_button==5 ? 'new_item1_but1':'' )+ (object.purchase_button==7 ? 'new_item1_but2':'' )+ (object.purchase_button==8 ? 'new_item1_but3':'' )  }}">{{object.button_content}}</view>
+                </view>
+              </view>
+            </navigator>
+          </view>
+        </block>
+      </view>
+    </block>
   </block>
   <block wx:else>
     <!--秒杀--> 
@@ -304,6 +304,7 @@ swiper {
   width: 100%;
   overflow: hidden;
 }
+
 .new_item1_image{
   width: 100%;
   /* max-width: 100%;
@@ -396,7 +397,7 @@ swiper {
   left: 0;
   top: 22rpx;
   width: 74rpx;
-  height: 60rpx;
+  height: 70rpx;
 }
  
 .aspect_ratio1{
@@ -411,3 +412,49 @@ swiper {
 .aspect_ratio4{
   aspect-ratio:3/4;
 }
+.container1 {
+  position: relative;
+  width:100%;
+  padding-top: 100%; 
+  overflow: hidden; 
+}
+.container2 {
+  position: relative;
+  width:100%;
+  padding-top: 56.25%; 
+  overflow: hidden; 
+}
+.container3 {
+  position: relative;
+  width:100%;
+  padding-top: 66.67%; 
+  overflow: hidden; 
+}
+.container4 {
+  position: relative;
+  width:100%;
+  padding-top: 133.33%; 
+  overflow: hidden; 
+  
+}
+
+.images1 {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  object-fit: cover;
+  
+}
+
+.flex2{
+  display: flex;
+  /* align-items: center; */
+  justify-content: space-between;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+}
 \ No newline at end of file