商品组件样式

后端开发-许程
1 parent 86be033d
Showing 9 changed files with 127 additions and 185 deletions
components/goods_list/goods_list.js
components/goods_list/goods_list.json
components/goods_list/goods_list.wxml
components/goods_list/goods_list.wxss
pages/index/index/index.js
pages/index/index/index.json
pages/index/index/index.wxml
utils/LoadMore.js
utils/filter.wxs
 // pages/user/yhq/qr_code/qr_code.js
-const {
-  barcode,
-  qrcode
-} = require('../../utils/index.js')
+
+
+var 
+ t = getApp(), a = t.request, o = t.globalData.setting, os = o,
+  i = require("../../utils/util.js"), ut = i, s = require("../../utils/common.js");
+
  
 Component({
   data: {
+    url: o.imghost,
     object: null,
+    curPage:1,
+    is_no_more:1,//加载完所有数据的控制器
+    load_complete:0//加载完成
   },
   properties: {
     // 这里定义了innerText属性，属性值可以在组件使用时指定
@@ -14,14 +20,55 @@ Component({
   ready: function () {
   },
  
+
   methods: {
+    
+       get_list:function(){
+       
+         var that = this;
+         var curPage = that.data.curPage;
+         getApp().request.get('/api/weshop/goods/page?page',{
+           data: { is_mainshow: 1, isonsale: 1,
+            is_recommend: 1, is_on_sale: 1,
+             store_id: o.stoid,
+             page: curPage,
+             pageSize:10,
+             },
+           success: function (res){
+          
+             that.data.curPage++;
+             var data=res.data;
+             if (res.data.data.pageData.length==0){
+               that.setData({is_no_more:0});
+               t.showWarning("加载完啦", null, 500, !1)
+               return false;
+             }
+             //加载完成
+             if (data.data.pageData) {
+               that.setData({load_complete:1});
+             }
+             that.setData({recommend:data.data.pageData});
+              }
+           })
+       },
+    bind_bnerr_xc: function (e) {
+      var _errImg = e.target.dataset.errorimg;
+      var _errurl = e.target.dataset.url;
+     
+        var _errObj = {};
+        _errObj[_errImg] = "/miniapp/images/default_g_img.gif";
+        this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉 ;
+      
+    },
  
+       reset:function(){
+         curPage=1;
+       },
+
+
     },
  
-    //打开
-  onshow: function (e) {
-    
-    }
+ 
  
  
  
 {
     "component": true,
-  "usingComponents": {}
+    "usingComponents": {}
 }
 \ No newline at end of file
@@ -5,7 +5,7 @@
         <!-- 商品详情 -->
         <view class="collect ib"  wx:for="{{recommend}}" bindtap="go_url" data-url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">
           <!-- 商品图片 -->  
-          <image class="sp" src="{{item.original_img}}" mode="scaleToFill"  binderror="bind_bnerr2" data-url="{{item.original_img}}" data-errorimg="recommend[{{index}}].original_img"></image>
+          <image class="sp" src="{{url+item.original_img}}" mode="scaleToFill"  binderror="bind_bnerr_xc" data-url="{{item.original_img}}" data-errorimg="recommend[{{index}}].original_img"></image>
           <view class="bottom">
             <!-- 商品名称 -->
             <view class="goods_name ellipsis-2 fs24">{{item.goods_name}}</view>
@@ -21,17 +21,11 @@
                 <view class="fs22">￥</view>
                 <view class="fs22">{{item.market_price}}</view>
               </view>
-
             </view>
-
-       
           </view>
-
-
         </view>
-        
       </view>
-      <view class="nothing flex-center" wx:if="{{is_no_more}}">
+      <view class="nothing flex-center" wx:if="{{is_no_more==0}}">
           <view class="Foil"></view>
           <view class="no_content fs24">没有更多内容了</view>
           <view class="Foil"></view>
 .collects {
   margin-top: 40rpx;
 }
+.ib{
+  display: inline-block;
+}
+.fs24{
+    font-size: 24rpx;
+}
+.flex-center{
+display:flex;
+justify-content:center;
+align-items:center;
+}
+.xc-wc{
+  color: #d60021;
  
+}
+.fs22{
+    font-size: 22rpx;
+}
+.xc-ash{
+color: #b9b9b9;
+}
+.choice_box .choice_list .choice_footer .price {
+    color: #f23030; height: 10px
+}
+.fs35{
+    font-size:35rpx;
+}
+.flex{display: flex}
+.ellipsis-2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.goods_name{
+  height: 70rpx;
+  margin-top: 6rpx;
+}
 .hang {
   width: 100%;
   margin: auto;
@@ -59,7 +59,7 @@ Page({
  
   onLoad: function () {
     var th = this;
-    n.init(th, "", "recommend");
+    // n.init(th, "", "recommend");
  
     //看一下商家是否开通了权益
     //--初始化是否有打勾--
@@ -72,8 +72,14 @@ Page({
       }
     })
  
+   
+
   },
   async onShow() {
+  
+    
+   
+   
     var th=this;
     await this.init_load();
     //显示的时候要开启计时器
@@ -288,13 +294,14 @@ Page({
       }
     })
     //---调用信息---
-    this.requestRecommend();
+    // this.requestRecommend();
     this.setData({ishow:1});
     //---先获取会员---
     t.getUserFir(function () {
  
     });
-
+    var goods_list = this.selectComponent("#goods_list"); //组件的id
+        goods_list.get_list();
   },
  
   //--判断小程序是否过期--
@@ -312,23 +319,13 @@ Page({
   },
   //---加载更多是靠这个函数----
   onReachBottom: function () {
-    //if (!n.canloadMore()) this.setData({ is_no_more:1});
-    var n1 = n.data.goodsLoadFinishFlag
-    if (n1) {
-      this.setData({ is_no_more: 1 });  return false;
-    }
-    n.canloadMore() && this.requestRecommend();
-    
+   
+    var goods_list = this.selectComponent("#goods_list"); //组件的id
+    goods_list.get_list();
+   
   },
  
-  //--更多商品--
-  requestRecommend: function () {
-    var e = this, t = '/api/weshop/goods/page?page=' + e.data.currentPage;
-    n.request(t, function () {
-        e.data.currentPage++;
-      }
-      , null, { is_mainshow: 1, isonsale: 1, is_recommend:1, is_on_sale: 1, store_id: o.stoid, pageSize: 10 });
-  },
+
  
   onPullDownRefresh: function (e) {
     this.data.recommend = null, this.data.currentPage = 1, n.resetConfig(), this.requestHomePage(),
@@ -393,12 +390,12 @@ Page({
   bind_bnerr2: function (e) {
     var _errImg = e.target.dataset.errorimg;
     var _errurl = e.target.dataset.url;
-    var ii = _errurl.indexOf(o.imghost);
-    if (ii != -1) {
-      var _errObj = {};
-      _errObj[_errImg] = this.data.url + "/miniapp/images/default_g_img.gif";
-      this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉 ;
-    }
+    //var ii = _errurl.indexOf(o.imghost);
+    // if (ii != -1) {
+    //   var _errObj = {};
+    //   _errObj[_errImg] = this.data.url + "/miniapp/images/default_g_img.gif";
+    //   this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉 ;
+    // }
   },
 //图片失败，默认图片
   bind_bnerr3: function (e) {
@@ -2,9 +2,9 @@
     "navigationBarBackgroundColor": "#ff7295",
     "navigationBarTextStyle": "white",
     "usingComponents": {
-        "goods_list":"/components/goods_list/goods_list",
+        "goods_recommend":"/components/goods_list/goods_list",
         "nav": "/components/diy_nav/diy_nav",
-  "advertising":"/components/diy_advertising/diy_advertising",
+        "advertising":"/components/diy_advertising/diy_advertising",
         "groupbuy": "/components/diy_groupbuy/diy_groupbuy",
         "goodsGroup":  "/components/diy_goodsGroup/diy_goodsGroup",
         "seckill": "/components/diy_seckill/diy_seckill",
@@ -140,12 +140,7 @@
                             <image src="{{url+aitem.original_img}}" lazy-load="true"  data-errorimg="saleGoods[{{index}}][{{aind}}].original_img"
                                    binderror="bind_bnerr3" data-img="{{aitem.original_img}}"></image>
  
-                            <!--<view class="djs_view">-->
-                                <!--<text class='tui-conutdown-box'>{{aitem.djs.day}}</text>天-->
-                                <!--<text class='tui-conutdown-box'>{{aitem.djs.hou}}</text>时-->
-                                <!--<text class='tui-conutdown-box'>{{aitem.djs.min}}</text>分-->
-                                <!--<text class='tui-conutdown-box tui-countdown-bg'>{{aitem.djs.sec}}</text>秒-->
-                            <!--</view>-->
+  
  
  
                             <image wx:if="{{aitem.status==0}}" class="status_img" src="{{url}}/miniapp/images/miao/yure.png"></image>
@@ -237,15 +232,7 @@
               </view>
  
 </view>
-               <!-- <view class="kill-item"wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind">
-                  <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}">         
-                <view class="kill-pic ">
-            <image class="wh100" src="{{url+aitem.original_img}}" data-val="{{aitem.original_img}}"
-                  data-errorimg="goodlist[{{index}}].original_img" binderror="bind_bnerr2" lazy-load="true">
-                  </image>
-        </view>
- </navigator>
-        </view> -->
+    
  
                 </swiper-item>
             </swiper>
@@ -256,93 +243,7 @@
         </view>
         </view>
     </view>
-    <!--新品上市-->
-    <!-- <view class="seckill" wx:if="{{newGoods!=null}}">
-        <navigator url="/pages/goods/goodsList/goodsList?is_new=1">
-            <view class="seckill-time">
-                <view class="classname">
-                    <text class="sk-tips">新品上市</text>
-                </view>
-                <image class="arrow-right" src="{{url}}/miniapp/images/icon-arrowdown.png"></image>
-            </view>
-        </navigator>
-        <view class="seckill-list">
-            <swiper class="s_prom" indicator-active-color='red'  indicator-dots="true">
-                <swiper-item wx:for="{{newGoods}}" class="p_swiper" wx:key="{{index}}">
-                    <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}"
-                               wx:for="{{item}}"  wx:key="item"  wx:for-item="aitem" wx:for-index="aind"
-                    >
-                        <view class="imgview">
-                            <image src="{{url+aitem.original_img}}" lazy-load="true"  data-errorimg="newGoods[{{index}}][{{aind}}].original_img"
-                                   binderror="bind_bnerr3" data-img="{{aitem.original_img}}"></image>
-                                                    
-                        </view>
-                        <view>{{aitem.goods_name}}</view>
-                        <view class="co-red">￥{{aitem.shop_price}}
-                            <text class="un_line">￥{{aitem.market_price}}</text>
-                        </view>
-                    </navigator>
-                </swiper-item>
-            </swiper>
-        </view>
-    </view> -->
-    <!--热销商品-->
-    <!-- <view class="seckill" wx:if="{{hotGoods!=null}}">
-        <navigator url="/pages/goods/goodsList/goodsList?is_hot=1">
-            <view class="seckill-time">
-                <view class="classname">
-                    <text class="sk-tips">热销商品</text>
-                </view>
-                <image class="arrow-right" src="{{url}}/miniapp/images/icon-arrowdown.png"></image>
-            </view>
-        </navigator>
-        <view class="seckill-list">
-            <swiper class="s_prom" indicator-active-color='red'  indicator-dots="true">
-                <swiper-item wx:for="{{hotGoods}}" class="p_swiper" wx:key="{{index}}">
-                    <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}"
-                               wx:for="{{item}}" wx:key="item"  wx:for-item="aitem" wx:for-index="aind"
-                    >
-                        <view class="imgview">
-                            <image src="{{url+aitem.original_img}}" lazy-load="true"  data-errorimg="hotGoods[{{index}}][{{aind}}].original_img"
-                                   binderror="bind_bnerr3" data-img="{{aitem.original_img}}"></image>
-                           
-                        </view>
-                        <view>{{aitem.goods_name}}</view>
-                        <view class="co-red">￥{{aitem.shop_price}}
-                            <text class="un_line">￥{{aitem.market_price}}</text>
-                        </view>
-                    </navigator>
-                </swiper-item>
-            </swiper>
-        </view>
-    </view> -->
-    <!--推荐商品-->
-    <!--111111111111 <view class="section">
-        <view class="section-title">推荐商品</view>
-        <view class="section-subtitle">
-            <image class="wh100" src="{{url}}/miniapp/images/pic-interesting.png"></image>
-        </view>
-    </view>
-    <view class="choice_box">
-        <view class="choice_list">
-            <view class="choice_item" wx:for="{{recommend}}" wx:key="{{index}}" >
-                <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">
-                    <image src="{{item.original_img}}" lazy-load="true" binderror="bind_bnerr2" data-url="{{item.original_img}}" data-errorimg="recommend[{{index}}].original_img"></image>
-                </navigator>
-                <navigator class="title shelue" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">{{item.goods_name}}</navigator>
-                <view class="choice_footer">
-                    <view class="price flex"> -->
-                       <!--<view class="meiz" wx:if="{{index==1}}">美妆价</view><view class="dengj" wx:if="{{index==3}}">等级价</view>-->
-                       <!-- 11111￥{{item.shop_price}} <view class="xiafa">￥{{item.market_price}}</view>
-                    </view>
-                    <view class="ys">已售{{item.sales_sum}}</view> -->
-                    <!-- <navigator class="similer" url="/pages/goods/goodsList/goodsList?cat_id={{item.cat_id}}">找相似</navigator>-->
-                <!-- 111111</view>
-            </view>
-        </view>
-    </view>
-</view> -->
-
+    
  
  
  
@@ -376,44 +277,10 @@
       </view>
  
     </view>
+    <!-- 商品列表组件 -->
+    <goods_recommend id="goods_list"></goods_recommend>
     <!-- 商品列表 -->
-    <!-- <view class="collects">
-      <view class="hang "> -->
-        <!-- 商品详情 -->
-        <!-- <view class="collect ib"  wx:for="{{recommend}}" bindtap="go_url" data-url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}"> -->
-          <!-- 商品图片 -->  
-          <!-- <image class="sp" src="{{item.original_img}}" mode="scaleToFill"  binderror="bind_bnerr2" data-url="{{item.original_img}}" data-errorimg="recommend[{{index}}].original_img"></image>
-          <view class="bottom"> -->
-            <!-- 商品名称 -->
-            <!-- <view class="goods_name ellipsis-2 fs24">{{item.goods_name}}</view> -->
-            <!-- 商品价格 -->
-            <!-- <view class="money flex"> -->
-              <!-- 办卡价 -->
-              <!-- <view class="flex xc-wc">
-                <view class="fs24">￥</view>
-                <view class="fs35">{{filter.toFix(item.shop_price,2)}}</view>
-              </view> -->
-              <!-- 原价 -->
-              <!-- <view class="price flex xc-ash">
-                <view class="fs22">￥</view>
-                <view class="fs22">{{item.market_price}}</view>
-              </view>
-
-            </view>
-
-       
-          </view>
-
-
-        </view>
-        
-      </view>
-      <view class="nothing flex-center" wx:if="{{is_no_more}}">
-          <view class="Foil"></view>
-          <view class="no_content fs24">没有更多内容了</view>
-          <view class="Foil"></view>
-      </view>
-      </view> -->
+  
         </view>
  
       </view>
@@ -110,13 +110,13 @@ var e = function() {
  
                   //没有活动，就不用调用接口
                   if (glist==""){
-                      c.setData(a({}, l, g));
+                      //c.setData(a({}, l, g));
                       if ("function" == typeof e && (n = e(t)), !1 === n) return !1;
                       i && 0 != i.length || (s.data.goodsLoadFinishFlag = !0, u && o.showWarning("加载完啦", null, 500, !1));
                       return false;
                   }
  
-                  c.setData(a({}, l, g));
+                 // c.setData(a({}, l, g));
                   if ("function" == typeof e && (n = e(t)), !1 === n) return !1;
                   i && 0 != i.length || (s.data.goodsLoadFinishFlag = !0, u && o.showWarning("加载完啦", null, 500, !1));
  
 var filters = {
         toFix:function(val,count){
-          console.log("你是说明书上 没什么 ");
             return val.toFixed(count)
         },
         replace_time:function(val){