美文网首页
小程序本地假分页 自适应滚动高度

小程序本地假分页 自适应滚动高度

作者: 糖醋里脊120625 | 来源:发表于2023-10-30 10:02 被阅读0次
        <!-- 自定义的导航栏开始 -->
        <view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
    
            <view class="title-left">
                <view class="back" bind:tap="backFun">
                    <van-icon color="white" name="arrow-left" size="25px" />
                </view>
                <view class="avatar-title">选择商品</view>
            </view>
            <view class="search-icon" bind:tap="searchClick" style="margin-right:{{navInfo.width}}px">
                <van-icon
                color="white"
                class="icon-forn"
                slot="left-icon"
                prefix="wr"
                name="search"
                size="50rpx"
                />
            </view>
        </view>
    
    
    <view class="name-all" id="nameID">
        <!-- <van-search disabled bind:click-input="searchClick" placeholder="请输入搜索关键词" /> -->
        <view class="business-top">
            <view class="business-left">
                <view class="business-name">{{postBusiness.eiName}}</view>
                <view class="business-text"><van-icon name="location" color="white" />{{postBusiness.eiAddress}}</view>
                <view class="business-text">
                    <van-icon name="friends" color="white" />
                    {{postBusiness.eiContact}}/
                    <view bind:tap="callPhone">{{postBusiness.eiAdminMobile}}</view>
                    
                </view>
                
            </view>
        </view>
    </view>
    <view class="main-cate">
        <scroll-view class="menu-left" style="height:{{heightScroll}}px;box-sizing: border-box;" scroll-y scroll-with-animation="{{true}}">
            <view class="menu-main">
                <view
                    class="cate-list"
                    wx:for="{{goodsList}}"
                    wx:for-item="item"
                    wx:for-index="index"
                    wx:key="index"
                    data-bean="{{item}}"
                    data-index="{{index}}"
                    bindtap="switchCategory"
                >
                    <text class="cate-text {{curIndex==index?'on':''}}">{{item.ptItemName}}</text>
                    
                </view>
            </view>
        </scroll-view>
        <view  class="menu-right" >
            <scroll-view style="height:{{heightScroll}}px;box-sizing: border-box;"  scroll-y="true" scroll-with-animation="true" bindscroll="watchScroll" scroll-into-view="{{toView}}" bindscrolltolower="Reachbottom">
                <block class="cate-product">
                    <view  class="product-list" wx:for="{{ProductList}}"  wx:for-item="each" data-each="{{each}}" wx:key="key">                     <van-image   lazy-load src="{{each.piImageUrl}}"/>
                        <view class="product-left">
                            <view class="product-name">{{each.piProductName}}</view>
                            <view class="product-desc">{{each.ProductDes}}</view>
                            <view class="product-end">
                                <view class="product_price">¥{{each.standardPrice}}</view>
                                <view class="add-cart"  wx:if="{{each.showAddOrSub==false}}">
                                    <van-icon 
                                        name="shopping-cart"  
                                        color="#fa550f" 
                                        size="50rpx"  
                                        data-item-index="{{index}}" 
                                        data-parentIndex="{{parentIndex}}"
                                        bindtap="addCart"/>
                                </view>
                                <view class="count-part" wx:if="{{each.showAddOrSub==true}}">
                                    <van-stepper
                                        data-item-index="{{index}}" 
                                        data-parentIndex="{{parentIndex}}"
                                        min="" 
                                        
                                        value="{{ each.SelNum }}" 
                                        bind:blur="BlurItemNum"
                                        bind:minus="MinusItemNum"
                                        bind:plus="PlusItemNum" 
                                        input-class="stepinput" 
                                        plus-class="stepplus" 
                                        minus-class="stepplus"
                                        input-width="60px" 
                                        button-size="25px"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="none-text" wx:if="{{ProductList.length==0}}">
                        <image  src="https://pic-shop.magcloud.net/miniapp_static/empty_order_icons.png" />
                        <view >空空如也...</view>
                    </view>
                    
                </block>
            </scroll-view>
        </view>
    
        
    </view>
    
    
    <view class="pop-button" >
        <van-goods-action custom-class="action-box">
            <van-goods-action-icon icon="share-o" text="分享"  open-type="share"/>
            <van-goods-action-icon icon="shop-o" text="我要开店"  bind:click="ClickShop"  />
            <van-goods-action-icon icon="cart-o" text="购物车" info="{{GoodsNum}}"   bind:click="onClickIcon"  />
            <van-goods-action-button wx:if="{{ editChoose==false }}" color="#fa550f" text="去下单" bind:click="SubmitFun" />
            <van-goods-action-button  wx:if="{{ editChoose }}" color="#fa550f" text="去下单" bind:click="EditSubmit" />
        </van-goods-action>
        <view class="support-text">技术支持:400-100-9083</view>
    </view>
    
    
    
    
    <van-popup  custom-style="height: 50%;" position="bottom" z-index="{{100}}" show="{{ showPopup }}"  bind:close="onCancelCategory">
        <view class="eject-product">
            <view class="eject-list">
                <view  class="ejectselected-list" wx:for="{{HasSelectedList}}"  wx:for-item="each" data-each="{{each}}" wx:key="key"  wx:if="{{ each.SelNum>0}}" >
                    <van-image  lazy-load src="{{each.piImageUrl}}"/>
                    <view class="ejectselected-left">
                        <view class="ejectselected-name">{{each.piProductName}}</view>
                        <view class="product-desc">{{each.ProductDes}}</view>
                        <view class="product-end">
                            <view class="product_price">¥{{each.standardPrice}}</view>
                            <view class="ejectselected-part" wx:if="{{each.showAddOrSub==true}}">
                                <van-stepper
                                    data-item-index="{{index}}" 
                                    data-parentIndex="{{parentIndex}}"
                                    min="" 
                                    value="{{ each.SelNum }}"
                                    bind:blur="BlurSelectedItemNum"
                                    bind:minus="MinusSelectedItemNum"
                                    bind:plus="PlusSelectedItemNum"   
                                    input-class="stepinput" 
                                    plus-class="stepplus" 
                                    minus-class="stepplus"
                                    input-width="60px" 
                                    button-size="25px"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
        </view>
    </van-popup>
    
    
    
    //存放右侧分类的高度累加数组
    var heightList = [];
    
    import { goodsGroup, basicBusinessInfo,goodsNoTokenGroup } from '../../http/goodsApi'
    import { centToYuan } from '../../unit/priceUtil'
    import { getLocalUserInfo } from '../../unit/userInfo'
    var dayjs = require('dayjs')
    const app = getApp()
    
    // https://www.bookstack.cn/read/vant-3.4.7-zh/8bd11acebe45f23c.md
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        goodsList: [],
        curIndex: 0,
        pageData: 1,
        hasLoadData: true,
        itemCateData: {},
        mainActiveIndex: 0,
    
    
        basicInfo: {},
        SeledGoods: [],
        GoodsNum: "",
        showPopup: false,
    
    
        heightArr: [],
        distance: 0,
        active: 0,
        selectId: "item0",
        MerchantInfo: {},
        postBusiness: {},
        SendTimeVal: dayjs(new Date().getTime()).format('YYYY-MM-DD'),
        ProductList: [],
        HasSelectedList: [],
    
        pageTotal: 0,
        pageSize: 10,
        pageIndex: 1,
        TotalDataList: [],
        detailID:"adc8f0fe062e49daa9957deec14d4eb5",
        editChoose:false,
    
    
        statusBarHeight: 0,
        navInfo: {},
        heightScroll:0
    
    
      },
    
      setScrollHeight(){
        var that =this;
        let WHeight="";
        let NHeight="";
        wx.getSystemInfo({//微信api,可以获取页面的信息
          success: (result) => {
            WHeight=result.windowHeight
          },
          fail: (res) => {},
          complete: (res) => {},
        })
        wx.createSelectorQuery().select('#nameID').boundingClientRect(function(rect){
          let setHeight = WHeight - rect.height-166;
          console.log(setHeight)
    
          that.setData({
            heightScroll: setHeight,
          })
          // console.log(WHeight)
          // console.log(rect.height)
        }).exec()
    
        
      },
      backFun() {
        wx.navigateBack({ delta: 1 });
      },
    
      callPhone() {
        wx.makePhoneCall({
         phoneNumber: this.data.postBusiness.eiAdminMobile
        })
        },
    
      // 选择左侧标签锚点定位
      activeNav(e) {
        var index = e.currentTarget.dataset.index
        this.setData({
          active: index,
          selectId: "item" + index
        })
      },
    
      //计算右侧每个锚点的高度
      selectHeight() {
    
        var list = []
        var height = 0;
        const query = wx.createSelectorQuery();
        query.selectAll('.subtitle').boundingClientRect()
        query.exec((res) => {
          res[0].forEach((item) => {
            height += item.height;
            list.push(height)
          })
        
          this.data.heightArr = list
        })
      },
    
      //监听scroll-view的滚动事件
      watchScroll(e) {
       
        let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
        let active = this.data.active;
        if (scrollTop >= this.data.distance) {
          if (active + 1 < this.data.heightArr.length && scrollTop >= this.data.heightArr[active]) {
            this.setData({
              active: active + 1
            })
          }
        } else {
          if (active - 1 >= 0 && scrollTop < this.data.heightArr[active - 1]) {
            this.setData({
              active: active - 1
            })
          }
        }
        this.data.distance = scrollTop;
      },
    
      getNavigationInfo() {
        var that = this;
        wx.getSystemInfo({
          success(res) {
            const menuButton = wx.getMenuButtonBoundingClientRect();
            that.setData({
              navInfo: {
                top: menuButton.top,
                right: res.windowWidth - menuButton.right,
                width: menuButton.width + 18,
                height: menuButton.height,
                bottom: menuButton.top - res.statusBarHeight
              }
            })
          }
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
    
      // aaa
      onLoad: function (options) {
    
        wx.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#FE6526',
          animation: {
            duration: 400,
            timingFunc: 'easeIn'
          }
        })
    
        
        var that =this;
        this.getNavigationInfo()
        wx.getSystemInfo({
          success: function (res) {
            that.setData({
              statusBarHeight: res.statusBarHeight,
            })
          },
        })
        if (JSON.stringify(options) == "{}") {
          return
    
        } else {
          let optionData = JSON.parse(decodeURIComponent(options.detInfo));
          console.log(optionData)
          if(optionData.editChose){
            console.log("编辑")
            this.setData({
              editChoose:true,
              SendTimeVal:optionData.basicInfo.SendTimeVal,
              MerchantInfo: optionData,
              basicInfo: optionData.basicInfo,
              HasSelectedList: optionData.SeledGoods.map((item) => {
                return {
                  piImageUrl: item.productImage,
                  piId: item.productId,
                  piProductName: item.productName,
                  ProductDes: item.ProductDes,
                  SelNum: item.productNum,
                  showAddOrSub: true
                };
              }),
              detailID: optionData.basicInfo.ordSupplierId
            })
            
          }else{
            console.log("新增")
            this.setData({
              MerchantInfo: optionData,
              detailID: optionData.eiId,
            })
          }
    
          
    
          console.log(getLocalUserInfo())
          if(getLocalUserInfo()){
            //登录状态下请求数据
            console.log("登录状态下")
          }else{
            //没有登录
            console.log("没有登录")
          }
          this.getGoodsLoginStatusData(this.data.detailID)
          this.getBusinessBasicInfo(this.data.detailID)
        }
        
        wx.setNavigationBarTitle({
          title: '商品下单',
        })
    
        this.selectHeight();
      },
      getBusinessBasicInfo(eiId) {
        
        basicBusinessInfo(eiId).then((res) => {
          console.log("公司的整个主体信息")
    
          let resuleData = res.data;
          let buildData = {
            eiId: resuleData.eiId,
            eiName: resuleData.eiName,
    
            eiContact: resuleData.eiContact,
            eiAdminMobile: resuleData.eiAdminMobile,
    
            eiProvinceName: resuleData.eiProvinceName,
            eiCityName: resuleData.eiCityName,
            eiAreaName: resuleData.eiAreaName,
            eiAddress: resuleData.eiAddress,
            eiLicenseNo: resuleData.eiLicenseNo,
          }
    
          this.setData({
            postBusiness: buildData
          })
          console.log("sssssssssssssssssss")
          console.log(buildData)
          
        })
      },
      searchClick() {
        var that = this;
        var selData = []
        this.data.goodsList.map((item) => {
          item.products.map((each) => {
            if (each.SelNum > 0) {
              selData.push(each)
            }
    
          })
    
        });
    
        const newData = JSON.stringify(
          {
            allData: this.data.goodsList,
            hasIncludedData: that.data.HasSelectedList
          }
        );
        wx.navigateTo({ url: `/pages/GoodsSearch/GoodsSearch?detInfo=` + encodeURIComponent(newData) });
      },
    
    
      onShareAppMessage: function (res) {
        console.log("上面数据为空吗")
        console.log(this.data.postBusiness.eiName)
    
    
        const shareData = {
          eiId:this.data.detailID,
        }
        const BuildData = JSON.stringify(shareData);
        if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res);
        }
        return {
          title: this.data.postBusiness.eiName,
          path: '/pages/ChoseGoods/ChoseGoods?detInfo=' + encodeURIComponent(BuildData),
        }
      },
    
      switchCategory(e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        var childData = e.currentTarget.dataset.bean.products;
    
    
        function FindItem(itemID, moreList) {
          let findData = moreList.find(x => x.piId == itemID.piId);
          return findData
        }
        var changeGoods = childData.map((each) => {
          if (FindItem(each, that.data.HasSelectedList)) {
            return {
              ...each,
              SelNum: FindItem(each, that.data.HasSelectedList).SelNum,
              showAddOrSub: true
            }
          } else {
            return {
              ...each
            }
          }
    
        })
    
    
        this.setData({
          ProductList: [],
          pageSize: 10,
          pageIndex: 1,
        })
    
        let list = changeGoods
        let qielist = list.slice(that.pageIndex - 1, that.data.pageSize)
    
    
        this.setData({
          TotalDataList: list,
          ProductList: qielist,
          curIndex: e.currentTarget.dataset.index ? e.currentTarget.dataset.index : 0,
          toView: 'order' + e.currentTarget.dataset.bean.productTypeId,
          active: index,
          selectId: "item" + index,
    
        })
      },
    
    
      Reachbottom() {
        console.log("是个啥")
        // wx.showLoading({
        //   title: '加载中',
        // })
        let shu = this.data.pageIndex
        this.setData({
          pageIndex: shu + 1
        })
        let num = (this.data.pageIndex - 1) * this.data.pageSize
        let num2 = num + this.data.pageSize
        let arr = this.data.TotalDataList
        let qielist = arr.slice(num, num2)
        let slist = this.data.ProductList
        let newarr = slist.concat(qielist)
        this.setData({
          ProductList: newarr
        })
    
        setTimeout(function () {
          wx.hideLoading()
        }, 300)
      },
    
    
    
    
      TotalAllSelecteFun() {
        this.setData({
          GoodsNum: this.data.HasSelectedList.length
        })
    
      },
      onCancelCategory() {
        this.setData({
          showPopup: false
        })
      },
      onClickIcon() {
        this.setData({
          showPopup: !this.data.showPopup
        })
      },
      ClickShop() {
        wx.navigateTo({ url: `/pages/poster/poster` });
      },
      SubmitFun() {
        if (this.data.HasSelectedList.length == 0) {
          wx.showToast({
            icon: 'none',
            title: "请选择商品",
          })
          return
        }
    
        const newData = JSON.stringify(
          {
            FromChoseGoods: this.data.HasSelectedList,
            basicInfo: this.data.postBusiness
          }
        );
        wx.navigateTo({ url: `/pages/addOrder/addOrder?detInfo=` + encodeURIComponent(newData) });
      },
      EditSubmit(){
        if (this.data.HasSelectedList.length == 0) {
          wx.showToast({
            icon: 'none',
            title: "请选择商品",
          })
          return
        }
        var pages = getCurrentPages(); // 获取页面栈
        var prevPage = pages[pages.length - 2]; // 上一个页面
    
    
        if (prevPage.__route__ == 'pages/addOrder/addOrder') {
          prevPage.changeGoods(this.data.HasSelectedList);
          wx.navigateBack({
            delta: 1
          })
        }
    
      },
      getGoodsLoginStatusData(infoID) {
        let that = this;
        let postData = {
          enterpriseId: infoID,
        }
        goodsNoTokenGroup(postData).then((res) => {
    
          function FindItem(itemID, moreList) {
            let findData = moreList.find(x => x.piId == itemID.piId);
            return findData
          }
    
          function FindPrice(item) {
            if (item.agreementUnitPrice) {
              return centToYuan(item.agreementUnitPrice);
            } else if (item.customerUnitPrice) {
              return centToYuan(item.customerUnitPrice);
            } else {
              return centToYuan(item.latestSaleUnitPrice);
            }
    
          }
    
          let newdata = res.data.map((item) => {
            if (item.products) {
              var childFloor = item.products.map((each) => {
                return {
                  ...each,
                  ProductDes: each.piSpec + '、' + each.piNetContent + each.piNetContentUnit + '/' + each.piSpec,
                  standardPrice: FindPrice(each),
                  showAddOrSub: FindItem(each, that.data.SeledGoods) == undefined ? false : true,
                  SelNum: FindItem(each, that.data.SeledGoods) == undefined ? 0 : FindItem(each, this.data.SeledGoods).SelNum,
    
                }
              })
            } else {
              var childFloor = []
            }
    
            return {
              ...item,
              text: item.ptItemName,
              products: childFloor,
            };
          });
          // aaa
          console.log("原始数据")
          console.log(newdata)
    
          var oneChild = newdata[0].products.map((each) => {
            if (FindItem(each, that.data.HasSelectedList)) {
              return {
                ...each,
                SelNum: FindItem(each, that.data.HasSelectedList).SelNum,
                showAddOrSub: true
              }
            } else {
              return {
                ...each
              }
            }
    
          })
    
          this.setData({
            pageTotal: Math.ceil(oneChild.length / 10) //根据后台返回的总数量,判断有多少页
          })
          let list = oneChild
          let qielist = list.slice(that.pageIndex - 1, that.data.pageSize)
    
          this.setData({
            goodsList: newdata,
            TotalDataList: list,
            ProductList: qielist,
            curIndex: 0
    
          })
          this.TotalAllSelecteFun()
    
          this.setScrollHeight()
    
        })
      },
    
      DynamicCacheArray(itemData) {
        let that = this;
        var findData = this.data.HasSelectedList.find(x => x.piId == itemData.piId);
        if (findData) {
          this.data.HasSelectedList = this.data.HasSelectedList.map((item) => {
            if (item.piId == itemData.piId) {
              return {
                ...item,
                SelNum: itemData.SelNum
              }
            } else {
              return {
                ...item,
              }
            }
    
          });
        } else {
          this.data.HasSelectedList.push(itemData)
    
        }
        if (itemData.SelNum == 0) {
          var indexNum = this.data.HasSelectedList.findIndex((tableData) => tableData.piId == itemData.piId);
          this.data.HasSelectedList.splice(indexNum, 1);
          console.log("删除")
        }
    
      
        that.setData({
          HasSelectedList: that.data.HasSelectedList,
          ProductList: this.data.ProductList
        });
        // 最后算
        this.TotalAllSelecteFun()
      },
    
      JudgeDecimal(num){
        var x = String(num).indexOf('.') + 1;   //小数点的位置
        var y = String(num).length - x;  //小数的位数
        console.log(y)
        return y
      },
      addCart(event) {
        let childIndex = event.currentTarget.dataset.itemIndex;
        this.data.ProductList[childIndex].showAddOrSub = true;
        this.data.ProductList[childIndex].SelNum = 1;
        this.setData({
          ProductList: this.data.ProductList
        });
        this.DynamicCacheArray(this.data.ProductList[childIndex])
      },
    
      BlurItemNum(event){
        var that =this;
        let indexNum = event.currentTarget.dataset.itemIndex;
        that.data.ProductList[indexNum].SelNum = event.detail.value;
        that.ChangeItemNum(indexNum, that.data.ProductList[indexNum])
      },
      MinusItemNum(event){
        var that =this;
        let indexNum = event.currentTarget.dataset.itemIndex;
         that.data.ProductList[indexNum].SelNum--;
        if( that.data.ProductList[indexNum].SelNum<0 ){
          console.log(that.data.ProductList[indexNum].SelNum)
          that.data.ProductList[indexNum].SelNum=0
        }
        that.ChangeItemNum(indexNum, that.data.ProductList[indexNum])
      },
      PlusItemNum(event){
        console.log(event)
        let indexNum = event.currentTarget.dataset.itemIndex;
        var that =this;
         that.data.ProductList[indexNum].SelNum ++;
         that.ChangeItemNum(indexNum, that.data.ProductList[indexNum])
      },
    
      // aaa
      ChangeItemNum(indexNum,itemData) {
        itemData.SelNum = this.JudgeDecimal(itemData.SelNum)>2?itemData.SelNum.toFixed(2):itemData.SelNum;
        var that = this;
        if (itemData.SelNum == 0) {
          that.data.ProductList[indexNum].showAddOrSub = false;
        }
        that.DynamicCacheArray(that.data.ProductList[indexNum])
        
      },
    
    
      BlurSelectedItemNum(event){
        var that =this;
        let indexNum = event.currentTarget.dataset.itemIndex;
        that.data.HasSelectedList[indexNum].SelNum = event.detail.value;
        that.changedSelected(indexNum, that.data.HasSelectedList[indexNum])
      },
      MinusSelectedItemNum(event){
        var that =this;
        let indexNum = event.currentTarget.dataset.itemIndex;
         that.data.HasSelectedList[indexNum].SelNum--;
        if( that.data.HasSelectedList[indexNum].SelNum<0 ){
          console.log(that.data.HasSelectedList[indexNum].SelNum)
          that.data.HasSelectedList[indexNum].SelNum=0
        }
        that.changedSelected(indexNum, that.data.HasSelectedList[indexNum])
      },
      PlusSelectedItemNum(event){
        console.log(event)
        let indexNum = event.currentTarget.dataset.itemIndex
        var that =this;
         that.data.HasSelectedList[indexNum].SelNum ++;
         that.changedSelected(indexNum, that.data.HasSelectedList[indexNum])
      },
    
    
      // cccc
      changedSelected(indexNum,itemData) {
        console.log(itemData.SelNum)
        itemData.SelNum = this.JudgeDecimal(itemData.SelNum)>2?itemData.SelNum.toFixed(2):itemData.SelNum;
        console.log(this.JudgeDecimal(itemData.SelNum))
        let that = this;
        this.data.ProductList = this.data.ProductList.map((item, index) => {
          if (item.piId == itemData.piId) {
            if (itemData.SelNum == 0) {
              return {
                ...item,
                showAddOrSub: false,
                SelNum: 0
              }
            } else {
              return {
                ...item,
                SelNum: itemData.SelNum
              }
            }
    
          } else {
            return {
              ...item,
            }
          }
    
        });
    
        if (itemData.SelNum == 0) {
          this.data.HasSelectedList.splice(indexNum, 1);
        }
        // 需要注意
        that.setData({
          HasSelectedList:this.data.HasSelectedList,
          ProductList: this.data.ProductList
        });
    
        this.TotalAllSelecteFun()
      },
    
    
      haveSearchGoods(usefulData) {
        var that = this;
        console.log(usefulData)
        console.log(this.data.HasSelectedList)
    
        var selData = []
        this.data.HasSelectedList.map((each) => {
          if (each.SelNum > 0) {
            selData.push(each)
          }
    
    
    
        });
        let OldGoods = selData;
        let NewGoods = usefulData;
    
        NewGoods.forEach((item) => {
          let index = OldGoods.findIndex(e =>
            e.piId == item.piId
          )
          if (index > -1) {
            OldGoods[index] = item
          } else {
            OldGoods.push(item)
          }
        })
        
        this.setData({
          HasSelectedList: OldGoods,
        });
        setTimeout(function () {
          that.getGoodsLoginStatusData(that.data.detailID)
        }, 10);
        return
      },
    
    
    
    
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
    
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
    
      /**
       * 用户点击右上角分享
       */
    
    })
    
    .product-end{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .product_price{
      font-size: 28rpx;
      color: #fa550f;
      font-weight: bold;
    }
    .business-top{
      display: flex;
      box-sizing: border-box;
      padding: 10rpx;
      justify-content: space-between;
      align-items: center;
    }
    
    .van-search{
      padding: 4px 12px!important;
    }
    
    .business-left{
      margin-left: 20rpx;
    }
    .business-name{
      font-size: 34rpx;
      color: white;
    }
    .business-text{
      margin-top: 10rpx;
      font-size: 30rpx;
      color: white;
      align-items: center;
      display: flex;
    }
    .business-type{
      font-size: 28rpx;
      color: #bbbbbb;
    }
    
    /* page,.main-cate {
      position: fixed;
      display: flex;
      width: 100%;
    } */
    
     .name-all{
      position: relative;
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #f6f6f6;
      background: #fa550f;
      /* padding-top: 200px; */
    } 
    .main-cate{
      display: flex;
    }
    
    .menu-left {
      width: 164rpx;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
      /* padding-bottom: 80px; */
      /* background: #f5f5f5; */
    
    
      
      height: 100vh;
    }
    
    .menu-left .cate-list {
      line-height: 40rpx;
      text-align: center;
      padding: 25rpx 0;
      font-size: .8rem;
    }
    
    .menu-left .cate-list .on {
      border-left: 3px solid #fa550f;
      color: #fa550f;
      font-size: 28rpx;
      background: white;
      padding: 25rpx 0rpx!important;
    }
    
    .cate-text{
      display: block;
      padding: 10rpx 0;
      font-size: 28rpx;
    }
    
    .add-cart{
      margin-top: 13rpx;
      display: flex;
      justify-content: flex-end;
    }
    .count-part{
      margin-top: 13rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .stepinput{
      background: white!important;
      margin: 0rpx 10rpx!important;
    }
    .stepplus{
      background: #fa550f!important;
      color: white!important;
      font-weight: bolder!important;
      border-radius: 30rpx!important;
    }
    
    .product-left input{
      
        background-color:rgba(236,109,81,0.3)!important;
      color: #fa550f!important;
    }
    
    
    .none-text{
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      padding-top: 100px;
      color: #bbbbbb;
    }
    .select{
      color: red!important;
    }
    .menu-right {
      /* height: 100vh; */
      /* flex-grow: 1; */
      background: white;
      width: calc(100% - 165rpx);
      /* position: fixed; */
      /* padding-bottom: 200px; */
      /* right: 0px; */
      /* top: 198px; */
      /* height: 100vh; */
    }
    .cate-product{
      box-sizing: border-box;
      padding-bottom: 82px;
      padding-left: 20rpx;
      padding-right: 20rpx;
      width: 100%;
    }
    .right-list{
      box-sizing: border-box;
      padding: 30rpx 0rpx;
      border-bottom: 1px solid #ebedf0;
    }
    .product-left{
      box-sizing: border-box;
      padding-left: 10rpx;
      width: 100%;
    }
    .product-list{
      box-sizing: border-box;
      padding: 0rpx 18rpx;
      display: flex;
    }
    .subtitle{
      box-sizing: border-box;
      padding: 0rpx 18rpx;
      margin-bottom: 20rpx;
    }
    .product-name{
      font-size: 30rpx;
    }
    .product-desc{
      font-size: 24rpx;
      color: #bbbbbb;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .product-price{
      display: flex;
      color: #fa4126;
      align-items: flex-end;
    }
    .real-icon{
      font-size: 24rpx;
    }
    .real-num{
      font-size: 32rpx;
      font-weight: bolder;
    }
    .product-list image {
      flex-shrink: 0;
      width: 140rpx;
      height: 140rpx;
      border-radius: 16rpx;
      margin-bottom: 10rpx;
    }
    
    
    .none-text image{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 88px;
      height: 97px;
    }
    .none-text{
      padding-top: 260rpx;
    }
    .none-text view{
      margin-top: 30rpx;
      font-size: 30rpx;
      color: #a5a5a5;
      text-align: center;
    }
    
    
    
    .sub-button{
      position: fixed;
      width: 100%;
      bottom: 8rpx;
      background: salmon;
      z-index: 999;
      height: 200rpx;
      padding: 10rpx 0rpx;
    }
    .sub-flex{
      position: relative;
      margin: auto;
      height: 50px;
      width: 100%;
      background: white;
    }
    .end-sub{
      width: 80%;
      position: relative;
      margin: auto;
      background: red;
      display: flex;
      justify-content: space-around;
    
      height: 50px;
      line-height: 50px;
      border-radius: 45px;
    }
    
    /* 弹出的部分 */
    .eject-product{
      margin-top: 20rpx;
      width: 100%;
      padding-bottom: 100rpx;
    }
    .ejectselected-list{
      display: flex;
      box-sizing: border-box;
      padding: 20rpx;
      border-bottom:1px solid #f1f4f8;
    }
    .ejectselected-list image{
      display: block;
      width: 60px;
      height: 60px;
      border-radius: 4px;
      flex-shrink: 0;
    }
    
    .ejectselected-left{
      box-sizing: border-box;
    
      padding-left: 20rpx;
      width: 100%;
    }
    .ejectselected-name{
      font-size: 30rpx;
    }
    .ejectselected-part{
      margin-top: 13rpx;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      
    }
    
    
    .button-part{
      position: relative;
      margin: auto;
      width: 80%;
      height: 52px;
      border-radius: 48rpx;
      display: flex;
      justify-content: space-between;
    }
    
    .button-left{
      width: 50%;
      height: 52px;
      background: #ff8200;
      border-top-left-radius: 48rpx;
      border-bottom-left-radius: 48rpx;
      display: flex;
    }
    .icon-buy{
      text-align: center;
      color: white;
      margin-left: 45rpx;
    }
    .button-right{
      font-size: 28rpx;
      width: 50%;
      height: 52px;
      line-height: 52px;
      background: #fa550f;
      color: white;
      border-top-right-radius: 48rpx;
      border-bottom-right-radius: 48rpx;
      text-align: center;
    }
    
    
    .business-top button{
      background: none!important;
      outline: none!important;
      border: none !important;
      
    }
    
    .business-top button::after{
      background: none!important;
      outline: none!important;
      border: none !important;
    
    
    }
    
    .action-box{
      bottom: 30px!important;
      padding-bottom: 6px!important;
    }
    .pop-button{
      z-index: 999;
      width: 100%;
      position: fixed;
      bottom: 0rpx;
      background: white;
      height: 30px;
    }
    .support-text{
      text-align: center;
      font-size: 28rpx;
      padding: 8rpx 0rpx ;
      color: #bbbbbb;
    }
    
    
    /* 头部 */
    .custom{
      /* position: fixed; */
      width: 100%;
      /* top: 0;
      left: 0; */
      height: 45px;
      /* background: #c00; */
      z-index: 9999;
      background: #fa550f;
      display: flex;
      align-items: center;
      justify-content: space-between;
      
    }
    .title-left{
      margin-left: 18rpx;
      display: flex;
      align-items: center;
    }
    .avatar-title{
      color: white;
      margin-left: 20rpx;
    }
    
    
    
    
    

    相关文章

      网友评论

          本文标题:小程序本地假分页 自适应滚动高度

          本文链接:https://www.haomeiwen.com/subject/wvdbidtx.html