微信小程序 项目中遇到的问题

        
        <view class="banner">
        <swiper indicator-dots="" autoplay="" interval="" duration="" circular="" style="height: 240rpx;">
            <block wx:for="" wx:key="">
            <swiper-item>
                <image src="" class="slide-image" />
            </swiper-item>
            </block>
        </swiper>
        </view>

        
    

            
            image.slide-image {
                width: 690rpx !important;
                height: 240rpx !important;
            }
            
            .banner {
                width: 690rpx;
                height: 240rpx;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                margin: 0 auto;
            }
            
            .banner image {
                width: 100%;
                height: 100%;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
            }

            
        

                
                data: {
                    imgUrls: [
                        'https://yay.zjl9.com/static/images/banner1.jpg',
                        'https://yay.zjl9.com/static/images/banner2.jpg',
                        'https://yay.zjl9.com/static/images/banner3.jpg'
                    ],
                    indicatorDots: true, // 是否显示面板指示点
                    autoplay: true,      // 是否自动切换
                    circular: true,      // 是否采用衔接滑动
                    interval: 3000,      // 自动切换时间间隔
                    duration: 1000,      // 滑动动画时长
                    }
                })
                
            

        
    // 弹窗 
    <view class="popup" hidden="{ {hiddenmask} }"> 
            <image src="https://xxx.zjl9.com/static/images/cc.png" style="width:520rpx;height:444rpx;"></image>
            <view class="goods">
            <text>收货成功</text>
            <button class="btn33" bindtap="look">查看订单</button>
            </view>
    </view>

    //mask 
    <view class="mask" hidden="{ {hiddenmask} }" catchtouchmove="preventTouchMove">
    </view>

        
    

            
                    Page({
                        data: {
                          hiddenmask:true
                        },
                        //点击按钮，如果页面有滚动条，会回滚到顶部
                        confirm(){
                          if (wx.pageScrollTo) {
                            wx.pageScrollTo({
                              scrollTop: 0
                            })
                          } else {
                            wx.showModal({
                              title: '提示',
                              content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
                            })
                          }
                       
                          this.setData({
                            hiddenmask: false
                          })
                           
                        },
                        //给蒙层添加catchtouchmove="preventTouchMove"，内容即使有滚动条，蒙层出现也能上下滑动
                         preventTouchMove: function (e) {
                      
                        },
                        //查看订单
                        look(){
                           wx.navigateTo({
                             url: '/mall/pages/orderDetailsComplete/orderDetailsComplete'
                           })
                        },
                 
                      })
    
            
        

        
    <view class='container'>
    <view class='section hot_type'>
    <scroll-view class='nav-view { {hot_menuFixedTop?"hot_menu_fixed":"None"} }' scroll-left="{ {scrollLeft} }" scroll-with-animation="true" scroll-x="true" style="white-space: nowrap">
        <button wx:for="{ {category} }" wx:key="{ {index} }" class=' { {currentTab==index?"on":" "} } category_item swiper-tab-list' data-current="{ {index} }" data-catgoryid="{ {item.id} }" bindtap="swichNav">{ {item.category_name} } </button>
    </scroll-view>
    <!-- 商品列表 -->
    <scroll-view class="list-view" scroll-y bindscrolltolower="lower" wx:if="{ {currentTab===0} }" >
    全部订单
    </scroll-view>
    <scroll-view class="list-view" scroll-y bindscrolltolower="lower" wx:if="{ {currentTab===1} }" >
    已完成
    </scroll-view>
    <scroll-view class="list-view" scroll-y bindscrolltolower="lower" wx:if="{ {currentTab===2} }">
    待施工
    </scroll-view>
    <scroll-view class="list-view" scroll-y bindscrolltolower="lower" wx:if="{ {currentTab===3} }" >
    待支付
    </scroll-view>
    </view>
</view>

        
    

            
            .container {
                padding-top: 35rpx;
            }
            
            button {
                height: 48rpx;
                color: #fff;
                line-height: 48rpx;
                font-size: 28rpx;
                border-radius: 0 !important;
                padding: 0;
                margin-right: 75rpx !important;
                background: transparent;
            }
            
            .hot_menu_fixed {
                position: fixed;
                top: 0;
                left: 28rpx;
                z-index: 10;
                background: #fff;
                width: 93%;
            }
            
            /* Swiper */
            
            swiper-item {
                height: auto;
            }
            
            .swiper-tab {
                width: 100%;
                border-bottom: 1rpx solid #efefef;
                line-height: 60rpx;
                background: #fff;
            }
            
            .swiper-tab-list {
                font-size: 28rpx;
                display: inline-block;
                border-bottom: 4rpx solid transparent;
                color: #666;
                padding-bottom: 20rpx;
            }
            
            .on {
                font-weight: bold;
                color: #f08417 !important;
                border-bottom: 4rpx solid #f08417 !important;
                border-radius: 2px;
            }
            
            .swiper-box {
                display: block;
                width: 100%;
                overflow: hidden;
                padding-left: 30rpx !important;
            }
            
            button::after {
                border: none;
            }
                      
            
        

                
                        Page({
                            data: {
                              currentTab: 0,
                              category:[
                                {
                                  category_name: "全部订单"
                                },
                                {
                                  category_name: "已完成"
                                },
                                {
                                  category_name: "待施工"
                                },
                                {
                                  category_name: "待支付"
                                }
                              ]
                            },
                          
                            //点击tab切换 
                            swichNav: function (e) {
                              console.log(e.target.dataset.current)
                              let that = this;
                              if (that.data.currentTab === e.target.dataset.current) {
                                return false;
                              } else {
                                that.setData({
                                  currentTab: e.target.dataset.current,
                                })
                              }
                            }                
                          });
                          
        
                
            

        

  <view class="container">
  <view class="user-info">
    <view class="info-box">
      <text class="uu"><text style="color:red;">*</text>姓名</text>
      <input type="text" value="" class="ipt" >
      </input>
    </view>

    <view class="info-box">
      <text class="uu"><text style="color:red;">*</text>性别</text>
      <input type="text" value="" class="ipt">
      </input>
    </view>

    <view class="info-box">
      <text class="uu"><text style="color:red;">*</text>号码</text>
      <input type="text" value="" class="ipt" style="border-bottom:none;">
      </input>
    </view>
  </view>

  <view class="user-info" style="border-bottom:none;">
    <view class="info-box">
      <text class="uu">品牌</text>
      <input type="button" value="" class="ipt" bindtap="chooseCar"  disabled="disabled">
      </input>
      <image src="https://yay.zjl9.com/static/images/down2.png" style="width:40rpx;height:40rpx;"></image>
    </view>
  </view>

  <view class="user-info" style="border-bottom:none;">
    <view class="info-box">
      <text class="uu">购买日期</text>
      <input type="button" value="" class="ipt" bindtap="chooseDate" disabled="disabled">
      </input>
      <image src="https://yay.zjl9.com/static/images/down2.png" style="width:40rpx;height:40rpx;"></image>
    </view>
  </view>

    <view class="user-info" style="border-bottom:none;">
    <view class="info-box">
      <text class="uu">车架号</text>
      <input type="text" value="" class="ipt" >
      </input>
    </view>
  </view>

  <view class="user-info" style="border-bottom:none;">
    <view class="info-box">
      <text class="uu"><text style="color:red;">*</text>车牌号</text>
      <input type="text" value="" class="ipt" >
      </input>
    </view>
  </view>

<view class="user-info" style="border-bottom:none;">
    <view class="info-box">
      <text class="uu"><text style="color:red;">*</text>省市区</text>
      <input type="button" value="" class="ipt" bindtap="chooseAddress" disabled="disabled">
      </input>
      <image src="https://yay.zjl9.com/static/images/down2.png" style="width:40rpx;height:40rpx;"></image>
    </view>
  </view>

<view class="user-info" style="border-bottom:none;">
    <view class="info-box">
    <text class="uu"><text style="color:red;">*</text>选择门店</text>
      <input type="button" value="" class="ipt"  bindtap="chooseAddress2" disabled="disabled">
      </input>
      <image src="https://yay.zjl9.com/static/images/down2.png" style="width:40rpx;height:40rpx;"></image>
    </view>
  </view>

<view class="user-info" style="border-bottom:none;">
    <view class="info-box" style="display:flex;">
    <text class="uu"><text style="color:red;">*</text>施工时间</text>
      <input type="button" value="" class="ipt" bindtap="chooseDate3" disabled="disabled" style="width:280rpx;padding-left:280rpx;">
      </input>
    
        <input type="button" style="width:150rpx;display:inline-block;padding-left:30rpx;" value="" class="ipt" bindtap="chooseDate2" disabled="disabled">
      </input>
      <image src="https://yay.zjl9.com/static/images/down2.png" style="width:40rpx;height:40rpx;display:inline-block;" class="img1"></image>

    
      <image src="https://yay.zjl9.com/static/images/down2.png" class="img2" style="width:40rpx;height:40rpx;"></image>
    </view>
  </view>


<view class="user-info" style="border-bottom:none;">
    <view class="info-box">
    <text class="uu"><text style="color:red;">*</text>服务类型</text>
      <input type="button" value="" class="ipt" bindtap="chooseClass" disabled="disabled">
      </input>
      <image src="https://yay.zjl9.com/static/images/down2.png" style="width:40rpx;height:40rpx;"></image>
    </view>
  </view>

<view style="display:flex;" class="beizhu">
    <view style="margin-top:10rpx;">备注</view>
    <view>
    <view class="page-section">
    <view class="textarea-wrp">
      <textarea auto-focus="true" style="height: 200rpx;" />
    </view>
  </view>
    </view>
</view>
  <button class="btn">确定</button>

</view>
// 汽车品牌 
<van-action-sheet show="" actions="" bind:close="onClose" bind:select="onSelect" />
// 门店地址 
<van-action-sheet show="" actions="" bind:close="onClose" bind:select="onSelect2" />
// 服务类型 
<van-action-sheet show="" actions="" bind:close="onClose" bind:select="onSelect3" />
// 购买日期 
<van-popup show="" bind:close="onClose" position="bottom">
  <van-datetime-picker type="date" value="" bind:input="onInput" min-date="" formatter="" bind:cancel="cancel" bind:confirm="confirm" />
</van-popup>

// 施工时间年月日 
<van-popup show="" bind:close="onClose" position="bottom">
<van-datetime-picker type="date" value="" bind:input="onInput5" min-date="" formatter="" bind:cancel="cancel" bind:confirm="confirm5" />
</van-popup>
// 施工时间 
<van-popup show="" bind:close="onClose" position="bottom">
<van-datetime-picker
  type="time"
  value=""
  min-date=""
  max-date=""
  bind:input="onInput2" bind:cancel="cancel" bind:confirm="confirm3"
/>
</van-popup>
// 省市区 
<van-popup show="" bind:close="onClose" position="bottom">
  <van-area area-list="" value="110101" bind:confirm="confirm2" bind:cancel="cancel"/>
</van-popup>    

        
    

            
  .container{
    padding-bottom: 30rpx;
  }
  .user-info {
    margin-top: 20rpx;
    padding: 0rpx 30rpx;
    border-bottom: 14rpx solid #f1f1f1;
  }
  
  .info-box {
    position: relative;
  }
  .img1{
    position: absolute;
    right: 100rpx;
    top: 18rpx;
  }
  .img2{
    position: absolute;
    right: 200rpx!important;
    top: 18rpx!important;
  }
  .info-box image {
    position: absolute;
    right: 0;
    top: 18rpx;
  }
  
  .user-info .ipt {
    border-bottom: 2rpx solid #eaeaea;
    height: 80rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 700;
    color: #a39f9f;
    padding-left: 165rpx;
    line-height: 80rpx;
  }
  
  .user-info .uu {
    position: absolute;
    top: 21rpx;
    left: 30;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
  
  /* 文本域 */
  
  textarea {
    width: 600rpx;
    height: 200rpx;
    /* padding: 25rpx 0; */
    background: #a39f9f;
    margin-left: 25rpx;
    color: #fff;
  }
  
  .beizhu {
    margin-top: 30rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 36rpx;
  }
  
  .btn {
    width: 691rpx;
    height: 62rpx;
    background: linear-gradient(90deg, rgba(98, 173, 226, 1) 0%, rgba(36, 110, 173, 1) 100%);
    border-radius: 30rpx;
    margin: 0 auto;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 62rpx;
    margin-bottom: 30rpx;
  }
              
                      
            
        

                
  const time = require('../../utils/util.js')
  import province_list from '../../utils/area.js'
  data: {
    val2: '上海市上海市宝山区',
    val3:'沪太路4361号宝山店',
    val4: '整车贴膜',
    show0: false,
    show: false,
    show1: false,
    show2: false,
    show3: false,
    show4: false,
    show5: false,
    flag: false,
    stamp: '',
    stamp2: '',
    stamp5:'',
    car: '点击选择汽车品牌',
    date: '点击选择日期',
    date3: '',
    date2: '09:00',

    actions: [
      {
        name: '奥迪'
      },
      {
        name: '奔驰'
      },
      {
        name: '宝马'
      }
    ],
    actions2: [
      {
        name: '沪太路4361号宝山店'
      },
      {
        name: '闵行区4361号闵行店'
      },
      {
        name: '徐汇区4361号徐汇店'
      }
    ],
    actions3: [
      {
        name: '整车贴膜'
      },
      {
        name: '整车贴膜2'
      },
      {
        name: '整车贴膜3'
      }
    ],
    
    currentDate: new Date().getTime(),
    minDate: new Date().getTime(),
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`;
      }
      return value;
    },
  
  },
  // 取消关闭
  onClose() {
    console.log(222)
    this.setData({
      show0: false,
      show: false
    });
  },
  // 选择汽车品牌
  chooseCar() {
    this.setData({
      show: true
    })
  },
  // 汽车品牌选择
  onSelect(event) {
    this.setData({
      car: event.detail.name,
      show: false
    })
  },
  // 购买日期输入框值
  onInput(event) {
    var stamp = event.detail
    this.setData({
      stamp
    })
  },
  //购买日期弹窗显示
  chooseDate() {
    this.setData({
      show1: true
    })
  },

//日期 / 地区弹窗的取消
  cancel() {
    console.log(222)
    this.setData({ show1: false, show2: false, show4: false, show5: false });
  },
  confirm(val) {
    console.log(val)
    var date = this.data.stamp
      date= time.formatTimeTwo(date, 'Y-M-D')
    this.setData({
      show1: false,
      show2: false,
      flag: true,
      date: date
    });
    
  
  },

  // 省市区
  chooseAddress(){
    this.setData({
      show2: true,
      areaList: province_list
    
    });
  },
  // 确认选择的省市区
  confirm2(val2) {
    console.log(val2)
    let test2 = `${val2.detail.values[0].name}${val2.detail.values[1].name}${val2.detail.values[2].name}`
    let province2 = val2.detail.values[0].name
    let city2 = val2.detail.values[1].name
    let county2 = val2.detail.values[2].name
    console.log(test2)
    this.setData({
      show2: false,
      val2: test2
    });
  },
  // 门店地址
  chooseAddress2() {
    this.setData({
      show0: true
    })
  },
  // 选中的门店地址
  onSelect2(event){
    console.log(event.detail);
    this.setData({
      val3: event.detail.name,
      show0: false
    })
  },


  // 选择服务类型
  chooseClass(){
    this.setData({
      show3: true
    })
  },
  // 选中服务类型
  onSelect3(event){
    console.log(event.detail);
    this.setData({
      val4: event.detail.name,
      show3: false
    })
  },

  // 施工时间-年月日
  chooseDate3(){
    this.setData({
      show5: true
    })
  },
  onInput5(event) {
    var stamp5 = event.detail
    this.setData({
      stamp5
    })
  },
  confirm5(val5) {
    let date5 = this.data.stamp5
    date5 = time.formatTimeTwo(date5, 'Y-M-D')
    this.setData({
      show5: false,
      date3: date5
    });
  },
  // 施工时间-时间
  chooseDate2() {
    this.setData({
      show4: true
    })
  },
  onInput2(event) {
    var stamp2 = event.detail;
    this.setData({
      stamp2
    })
  },
  confirm3(val3){
    var date2 = this.data.stamp2;
    this.setData({
      show4: false,
      date2: date2
    });
  },
  /**
    * 生命周期函数--监听页面加载
    */
  onLoad: function (options) {
    var date3 = new Date().getTime() 
    date3 = time.formatTimeTwo(date3, 'Y-M-D')
    this.setData({
      date3
    })
  }
})             
        
                
            

格式化日期

              
    const formatTime = date => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    const formatNumber = n => {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    
    function formatTimeTwo(number, format) {
      var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
      var returnArr = [];
      // var date = new Date(number * 1000);//时间戳为10位
      var date = new Date(number);//时间戳为13位
      returnArr.push(date.getFullYear());
      returnArr.push(formatNumber(date.getMonth() + 1));
      returnArr.push(formatNumber(date.getDate()));
    
      returnArr.push(formatNumber(date.getHours()));
      returnArr.push(formatNumber(date.getMinutes()));
      returnArr.push(formatNumber(date.getSeconds()));
    
      for (var i in returnArr) {
        format = format.replace(formateArr[i], returnArr[i]);
      }
      return format;
    }
    module.exports = {
      formatTime: formatTime,
      formatTimeTwo: formatTimeTwo
    }
              
            

        
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;