微信小程序企业版关于我们企业介绍设计制作开发教程

本文给大家带来的是微信小程序企业版关于我们企业介绍设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/user/dingdan.wxmldisplay: flex-->
<view class="swiper-tab">
<scroll-view scroll-x="true" style=" white-space: nowrap; " >
  <view class="swiper-tab-list {{currentTab==0 ?'on' : ''}}" data-current="0" bindtap="swichNav"><text style="color:#458B00">▋</text>关于我们</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">旗下品牌</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">分公司介绍</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">公益事业</view>
  <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">专家委员</view>
  <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">售后服务</view>

  </scroll-view>
</view>


<view class="c_t60"></view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

  <!-- 综合 -->
  <swiper-item> 

    <view class="shop df" wx:for="{{order5}}">        

        <view class="df_1">            
            <view class="sp_text">

        <view>
                {{item.text}}
        </view>

      <view class="classname">
       <image style="width:100%" class="" src="{{item.ImgUrl}}" ></image>
      </view>

            </view>
        </view>
    </view>
              
  </swiper-item>

  <!-- 销量 -->
  <swiper-item>

    <view class="search_no" >

    <view class="shop df" wx:for="{{order5}}">

        <view class="df_1">            
            <view class="sp_text">

        <view>
                {{item.text}}
        </view>

      <view class="classname">
       <image style="width:100%" class="" src="{{item.ImgUrl}}" ></image>
      </view>


            </view>
        </view>
        </view>
    </view>
  </swiper-item>

  <!-- 折扣 -->
  <swiper-item>

        <view class="search_no">
        <view class="shop df" wx:for="{{order5}}">        
        <view class="df_1">            
            <view class="sp_text">
        <view>
                {{item.text}}
        </view>

      <view class="classname">
       <image style="width:100%" class="" src="{{item.ImgUrl}}" ></image>
      </view>
            </view>
        </view>
        </view>
    </view>

  </swiper-item>
  <!-- 折扣 -->
  <swiper-item>

        <view class="search_no">
        <view class="shop df" wx:for="{{order5}}">        
        <view class="df_1">            
            <view class="sp_text">

        <view>
                {{item.text}}
        </view>

      <view class="classname">
       <image style="width:100%" class="" src="{{item.ImgUrl}}" ></image>
      </view>
            </view>
        </view>
        </view>
    </view>
              
    
  </swiper-item>

  <!--5-->
  <swiper-item>

        <view class="search_no">
        <view class="shop df" wx:for="{{order5}}">        
        <view class="df_1">            
            <view class="sp_text">
        <view>
                {{item.text}}
        </view>

      <view class="classname">
       <image style="width:100%" class="" src="{{item.ImgUrl}}" ></image>
      </view>
            </view>
        </view>
        </view>
    </view>
               
    
  </swiper-item>
<!--6-->
  <swiper-item>

        <view class="search_no">
        <view class="shop " wx:for="{{order5}}">
        <view>
                {{item.text}}
        </view>

      <view class="classname">
       <image style="width:100%" class="" src="{{item.ImgUrl}}" ></image>
      </view>

        </view>
    </view>

    
  </swiper-item>

</swiper>

二、wxss样式文件代码如下：

/* pages/user/dingdan.wxss */
.swiper-tab{  
    width: 100%;  
    border-bottom: 1px solid #eee;  
    text-align: center;  
    line-height: 80rpx;
    background: #fff;  
    position: fixed;
    top: 0;  
    z-index: 999;
    }  
.swiper-tab-list{  
  font-size: 12px;  
  display: inline-block;  
  width: 25%;  
  color: #666;  
  }  
.on{ 
  color: #dd2727;  
  border-bottom: 5rpx solid #dd2727;
  }  
  
.swiper-box{ 
  display: block; 
  height: 100%; 
  width: 100%; 
  overflow: hidden; 
  }  

.clearbutton{
    background: #fff; 
    display: inline-block;
    margin:3% 3% 2% 3%; 
    color: #dd2727;
    font-size: 14px;
    width: 94%;
}
.shop{
    background: #fff;
    padding: 4%;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee
}
.shop checkbox{ 
    margin-top: 27px;
    }
.sh_slt{
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 4%;
    float: left;
}
.sp_text{
    float: left;
    line-height: 20px;
    width: 100%;
    text-align: left;
    }
.sp_tit{
    width: 100%;
    overflow: hidden;
    font-size: 16px;
}
.sp_neb{
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
    padding: 20rpx 0;
    
}
.sp_j{
  float: left;
  font-size: 30rpx;
  color: #ccc;
}
.sp{
    float: right;
      font-size: 30rpx;
      color: #ccc;
}
.dle{
    color: #999;
    font-size: 12px;
    float: right;
}
.dle image{
    width: 18px;
    height: 18px;
    vertical-align: sub;
}
.jk_bottom{
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%; 
    display: inline-flex;
    border-bottom: 1px solid #eee; 
    font-size: 14px;
    color: #999;       
}
.jk_bottom checkbox{
    margin: 4% 0 4% 4%;    
}
.jk_bottom .heji{
    margin-top: 5.5%;
    width: 30%; 
    text-align: right;   
}
.jk_bottom .all{
    margin-top: 5.5%;
    padding-left: 2%;  
}
.jk_bottom .js_button{
    background: #dd2727;
    float: right;
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 40%;
    position: absolute;
    right: 0;
    line-height: 50px;
}
.c_t60{
    clear: both;
    height: 1px;
    padding-top: 48px;
}
.blue{
  color: #42b1ff;
}
.mr_5{
    margin-right: 5px;
}

三、js页面代码如下：

// pages/user/dingdan.js
//index.js  
//获取应用实例  
var app = getApp();
var common = require("../../utils/common.js");
Page( {  
  data: {  
    winWidth: 0,  
    winHeight: 0,  
    // tab切换  
    currentTab: 0,  
    isStatus:1,//1待付款，2待收货，3已完成
    page:1,
    orderList0:[

    ],
   orderList1:[],
    orderList2:[],
    orderList3:[],
    orderList4:[],
      order5:[
       {'text':" 《炉石传说》中的卡牌人物虽然很多，而且暴雪每过几个月就要增加新卡，大部分人至今没有集齐，但这并不妨碍玩家自制DIY卡牌，下面就带大家看看有幸进入《炉石》世界大展宏图的《LOL》英雄们。",
      'ImgUrl':'../../images/zs01.png'
       } 
      ],

  },  
  onLoad: function(options) { 
     var objectId = options.ming;
  console.log(objectId)
 wx.setNavigationBarTitle(
    {
      title: objectId,
      success: function() {
        console.log('setNavigationBarTitle success')
      },
    })

    this.initSystemInfo();
    this.setData({
      currentTab: 0,
      // parseInt(options.currentTab)
    });
    this.setData({
      isStatus: this.getOrderStatus(),
    });
    console.log(options);

    if(this.data.currentTab == 6){
      this.loadReturnOrderList();
    }else{
      this.loadOrderList();
    }
  },  
  getOrderStatus:function(){
    return this.data.currentTab == 0 ? 1 : this.data.currentTab == 2 ?2 :this.data.currentTab == 3 ? 3:0;
  },
  loadOrderList: function(){
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/GetOrderZBTList',
      method:'post',
      data: {
        userId:app.d.userId,
        isStatus:that.data.isStatus,
        pageindex:that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initOrderList(data);
        switch(that.data.currentTab){
          case 0:
            that.setData({
              orderList0: that.data.orderList0.concat(data),
            });
            break;
          case 2:
            that.setData({
              orderList2: that.data.orderList2.concat(data),
            });
            break;
          case 3:
            that.setData({
              orderList3: that.data.orderList3.concat(data),
            });
            break;
        }
        //endInitData
        console.log(that.data);
      },
    });
  },
  initOrderList:function(data){
    for(var i=0; i<data.length; i++){
      console.log(data[i]);
      var item = data[i];

      item.ImgUrl = app.d.hostImg + item.ImgUrl;
      item.price = item.price/100;
      item.BuyMoney = item.BuyMoney/100;
      item.TotalAmount = item.TotalAmount/100;
      item.TotalMoney = item.TotalMoney/100;
      item.ProductImgUrl = app.d.hostImg + item.ProductImgUrl;
    }
  },
  loadReturnOrderList:function(){
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/GetReturnListZBT',
      method:'post',
      data: {
        userId:app.d.userId,
        pageindex:that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initOrderList(data);
        that.setData({
            orderList4: that.data.orderList4.concat(data),
          });
        //endInitData
      },
    });
  },
  removeOrder:function(e){
    var that = this;
    var orderId = e.currentTarget.dataset.orderId;
    wx.showModal({
      title: '提示',
      content: '你确认移除吗',
      success: function(res) {

        res.confirm && wx.request({
          url: app.d.hostUrl + '/ztb/orderZBT/ReMoveOrderZBT',
          method:'post',
          data: {
            orderId: orderId,
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var data = res.data;
            console.log(data);
            //todo
            if(data.result == 'ok'){
              //that.data.productData.length =0;
              switch(that.data.currentTab){
                case 0:
                  that.data.orderList0.length = 0;
                  break;
                case 2:
                  that.data.orderList2.length = 0;
                  break;
                case 3:
                  that.data.orderList3.length = 0;
                  break;
              }
              that.loadOrderList();
            }
          },
        });

      }
    });
  },
  // returnProduct:function(){
  // },
  initSystemInfo:function(){
    var that = this;  
  
    wx.getSystemInfo( {
      success: function( res ) {  
        that.setData( {  
          winWidth: res.windowWidth,  
          winHeight: res.windowHeight  
        });  
      }    
    });  
  },
  bindChange: function( e ) {  
  
    var that = this;  
    that.setData( { currentTab: e.detail.current });  
  
  },  
  swichNav: function( e ) {  
  
    var that = this;  
  
    if( this.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else {  
      that.setData({
        currentTab: parseInt(e.target.dataset.current),
      });
      that.setData( {  
        isStatus: this.getOrderStatus(),
      });

      //没有数据就进行加载
      switch(that.data.currentTab){
          case 0:
            !that.data.orderList0.length && that.loadOrderList();
            break;
          case 2:
            !that.data.orderList2.length && that.loadOrderList();
            break;
          case 3:
            !that.data.orderList3.length && that.loadOrderList();
            break;
          case 4:
            that.data.orderList4.length = 0;
            that.loadReturnOrderList();
            break;
        }
    };
  },
  /**
   * 微信支付订单
   */
  payOrderByWechat: function(event){
    var orderId = event.currentTarget.dataset.orderId;
    this.prePayWechatOrder(orderId);
    var successCallback = function(response){
      console.log(response);
    }
    common.doWechatPay("prepayId", successCallback);
  },

  /**
   * 调用服务器微信统一下单接口创建一笔微信预订单
   */
  prePayWechatOrder: function(orderId){
    var uri = "/ztb/userZBT/GetWxOrder";
    var method = "post";
    var dataMap = {
      SessionId: app.globalData.userInfo.sessionId,
      OrderNo: orderId
    }
    console.log(dataMap);
    var successCallback = function (response) {
      console.log(response);
    };
    common.sentHttpRequestToServer(uri, dataMap, method, successCallback);
  },
  onShareAppMessage: function () {
    return {
      title: '',
      desc: '!',
      path: '/page/index/index'
    }
  },
})

模板简介：该模板名称为【微信小程序企业版关于我们企业介绍设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。